比如本人网站的搜索框：
不使用的时候：
鼠标点击后：
用JQuery实现这个效果非常简单，下面是代码： 代码如下: $(document).ready(function () { var searchBox = $(“#ctl00_txtSearch”); searchBox.focus(function () { if (searchBox.val() == this.title) { // TextBox控件ToolTip属性转换为Html为title属性 searchBox.val(“”); } }); searchBox.blur(function () { if (searchB
在网页设计中，提高用户体验是至关重要的，而一个常见的交互设计模式是当用户聚焦到文本框时，自动清除或显示提示文本。这种效果在搜索框中尤为常见，它可以帮助用户理解输入区域的目的。本文将详细讲解如何使用jQuery来实现这个功能。
jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画制作和Ajax交互。在本例中，我们将利用jQuery的`focus`和`blur`事件来监听文本框的焦点获取与失去，从而实现提示文本的显示与隐藏。
代码如下：
```javascript
$(document).ready(function () {
var searchBox = $("#ctl00_txtSearch"); // 获取搜索框元素
// 当文本框获得焦点时执行
searchBox.focus(function () {
if (searchBox.val() == this.title) { // 检查文本框值是否等于title属性
// 将TextBox控件的ToolTip属性（HTML中的title属性）清空
searchBox.val("");
}
});
// 当文本框失去焦点时执行
searchBox.blur(function () {
if (searchBox.val() == "") { // 如果文本框为空
searchBox.val(this.title); // 还原为title属性的值，即提示文本
}
});
// 此行代码可能用于初始化，确保页面加载完成后立即应用效果
searchBox.blur();
});
```
在这段代码中：
1. `$(document).ready` 是一个jQuery函数，表示文档加载完成后再执行其内部的函数，确保所有DOM元素都可被访问。
2. `var searchBox = $("#ctl00_txtSearch")` 是通过选择器选取ID为`ctl00_txtSearch`的元素，将其赋值给变量`searchBox`。这里的ID可能是ASP.NET中由服务器生成的客户端ID。
3. `searchBox.focus` 和 `searchBox.blur` 分别绑定到文本框的`focus`和`blur`事件上。`focus`事件在用户将焦点移入文本框时触发，`blur`事件则在焦点离开文本框时触发。
4. 在`focus`事件处理函数中，我们检查文本框的当前值是否等于其`title`属性（通常作为提示文本）。如果是，就清空文本框的值，让用户可以输入。
5. 在`blur`事件处理函数中，我们检查文本框是否为空。如果为空，就恢复`title`属性的值，这样当用户再次看到该文本框时，会看到提示文本。
通过这种方式，我们可以实现一个友好且直观的搜索框提示功能。用户点击搜索框时，提示文本消失，允许他们输入；当他们离开搜索框，若未输入任何内容，提示文本会重新出现。这种交互设计提高了用户体验，使得网站或应用更加易用。
