用JQuery实现需求说明 当文本框获得焦点时,文本框内默认文字消失,失去焦点时,文本框内提示文字再次出现
时间: 2024-10-19 07:02:22 浏览: 27
在jQuery中,你可以轻松地利用`focus()`和`blur()`事件处理函数来实现这个需求。这两个事件分别对应于元素获取焦点和失去焦点的时候。以下是实现此功能的一个简单示例:
首先,假设你的HTML中有这样一个文本框,并带有默认提示文字:
```html
<input type="text" id="myInput" placeholder="请输入内容">
```
然后,在JavaScript文件中,或者是在HTML中直接使用`<script>`标签,使用jQuery来绑定事件:
```javascript
$(document).ready(function() {
// 获取输入框元素
var input = $('#myInput');
// 当输入框获得焦点时,清除默认提示文字
input.focus(function() {
$(this).val('');
});
// 当输入框失去焦点时,显示默认提示文字
input.blur(function() {
if (input.val() === '') { // 检查是否为空
input.val('请输入内容'); // 如果为空,恢复默认提示
}
});
});
```
这段代码会在页面加载完成后,当用户点击文本框使其聚焦时,清空文本框的内容;当焦点离开文本框时,如果文本框为空,则会添加回默认的提示文字。
阅读全文