jsp的input输入框内容清空
时间: 2025-06-29 15:16:40 浏览: 8
### 如何在 JSP 中清空 input 文本框的内容
为了实现在 JSP 页面中清空 `input` 输入框的内容,可以采用多种方法。以下是几种常见的方式:
#### 方法一:通过 JavaScript 函数处理焦点事件
可以在 HTML 的 `<input>` 标签上定义 `onfocus` 和 `onblur` 属性来控制文本框内的默认提示信息显示与隐藏。
```html
<input type="text" value="请输入用户名"
onfocus="if (this.value === '请输入用户名') { this.value = ''; }"
onblur="if (this.value === '') { this.value = '请输入用户名'; }">
```
这种方法适用于希望提供占位符效果的情况,在用户点击输入框时自动清除初始文本,并且如果用户未输入任何内容并移开光标,则会重新显示原始提示语句[^1]。
#### 方法二:简化版仅清空操作
对于只需要简单地清空文本框而不涉及占位符逻辑的情形,可以直接利用 `onfocus` 事件触发时立即清空当前值:
```html
<input name="deptname" style="width:100px; position:absolute; left:0px;"
value="全部" οnfοcus="this.value=''">
```
此方式适合于那些不需要复杂交互逻辑的应用场景,比如过滤条件的选择项等[^3]。
#### 方法三:结合样式变化增强用户体验
除了基本的功能外,还可以进一步优化用户的视觉体验,例如改变背景颜色以指示状态的变化。这通常涉及到编写额外的 CSS 类以及相应的 JavaScript 处理程序。
```javascript
<script language="javascript" type="text/javascript">
function myFocus(obj, color){
obj.style.backgroundColor = color;
if (obj.value === "默认文本") {
obj.value = "";
}
}
function myBlur(obj, defaultText, originalColor){
if (obj.value === "") {
obj.value = defaultText;
obj.style.backgroundColor = originalColor;
}
}
</script>
<!-- 使用上述脚本 -->
<input type="text" id="exampleInput" value="默认文本"
onfocus="myFocus(this,'#FFFFCC')"
onblur="myBlur(this,'默认文本','#FFFFFF')">
```
这段代码不仅实现了文本框聚焦时清空内容的效果,还增加了背景色的变化作为辅助反馈机制[^2]。
---
阅读全文
相关推荐


















<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加合同信息</title> </head> <body bgcolor = "lightgreen"> <form action="http://localhost:8080/EIMS/contactManage/addContactCheck.jsp" method = "post"> 合同查询 合同添加
添加合同信息 客户姓名 <input type = "text" name = "clientName"/> 合同名称 <input type = "text" name = "contactName"/> 合同内容 <input type = "text" name = "contactContents"/> 合同有效日期 <input type = "text" name = "contactStart"/> 合同有效期 <input type = "text" name = "contactEnd"/> 业务员姓名 <input type = "text" name = "StaffName"/> <input type = "submit" name = "sure" value = "确认"/> <input type = "reset" name = "clear" value = "取消"/> </form> </body> </html>
