基于JQuery实现鼠标点击文本框显示隐藏提示文本

我们做搜索框的时候,经常需要这样一个效果:搜索框默认显示一段提示文本,比如“输入关键词”,鼠标点击后,清空这段文本。鼠标再次点击别的地方,又要恢复这段文本

比如本人网站的搜索框:

不使用的时候:

基于JQuery实现鼠标点击文本框显示隐藏提示文本

鼠标点击后:

基于JQuery实现鼠标点击文本框显示隐藏提示文本

用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 (searchBox.val() == "") {
searchBox.val(this.title);
}
});
searchBox.blur();
});


其中#ctl00_txtSearch是搜索框的ID(ASP.NET可以通过ClientID获取这个ID)

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdjgfp.html