基于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）

赞 (0)

相关推荐

  • jQuery控制TR显示隐藏的几种方法

    网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: 这行不隐藏 这行要隐藏 这行要隐藏 那么控制显隐可以直接使用 for(var i = 1; i < tr_len; i++){ //tr_len是要控制的tr个数 $("#tr_"+i).hide(); } 第二种方法,是使用$.each(),这个方法需要设置table的id,如下: 这行不隐藏 这行要隐藏 这行要隐藏 那么控制显隐可以直接使

  • JQuery显示、隐藏div的几种方法简明总结

    例子 复制代码 代码如下: $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法 1.给元素换class,来实现隐藏div,前提是换的c

  • Jquery 点击按钮显示和隐藏层的代码

    代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"

  • jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)

    实例 通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素: 复制代码 代码如下: $(".btn1").click(function(){ $("p").slideToggle(); }); 定义和用法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 语法 $(selector).slideToggle(speed,callback)参

  • Jquery实现显示和隐藏的4种简单方式

    Html代码: 复制代码 代码如下: <div class="topicList"> <h3><span>学习天地</span></h3> <ul> <li>1111111111</li> <li>2222222222</li> <li>333333333</li> <li>4444444444</li> <li&

  • jquery显示和隐藏div特效实例

    $(document).ready(  function(){});function hiden(){$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast} function slideToggle(){$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上}func

  • Jquery实现点击切换图片并隐藏显示内容(2种方法实现)

    我们的电脑屏幕大小是固定的,那么如何在有限的空间放更多的内容呢? 我们应该给用户足够的选择权,当他们想要看某些内容的时候可以很快的看到,不想看的时候就把他隐藏.于是就有了题目说的这个问题. 其实这个问题很简单,那么,之所以拿出来跟大家分享,一方面我们大家相互交流,另一方面,也是对自己的学习的一种总结. 这里我想到了两种方法,给大家分享一下. 好了不多说,下面看代码: 第一种,是常规的方法: [javascript] 复制代码 代码如下: $(function(){ var images = ['

  • jQuery控制TR显示隐藏的三种常用方法

    网上有很多,这里介绍三种: 第一种方法,就是使用id,这个方法可以在生成html的时候动态设置tr的id,也是用得最多最简单的一种,如下: <table> <tr><td>这行不隐藏</td></tr> <tr id="tr_1"><td>这行要隐藏</td></tr> <tr id="tr_2"><td>这行要隐藏</td>

  • jQuery的显示和隐藏方法与css隐藏的样式对比

    display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到. visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到. 例子: 复制代码 代码如下: <html> <head> <title&g

  • jQuery简单实现列表隐藏和显示效果示例

    jQuery简单实现列表隐藏和显示效果示例

    本文实例讲述了jQuery简单实现列表隐藏和显示效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隐藏和显示</title> <style> *{ padding: 0; margin: 0;} li{ list-style-type: none;} bo

  • jquery和js实现对div的隐藏和显示方法

    jQuery对div的显示和隐藏: 显示: 复制代码 代码如下: $("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 复制代码 代码如下: style="visibility: none;" document.getElementById("typediv1").style.vi

  • jQuery动态显示和隐藏datagrid中的某一列的方法

    复制代码 代码如下: $(function(){ $('#tt').datagrid({ title:'报表统计', width:1020, height:400, url:'', fitColumns:true, loadMsg:'正在获取,请稍侯...', singleSelect:true, nowrap:false, columns:[[ {field:'REGION_NAME',title:'分公司',width:30,align:'center'}, {field:'COUNTY_N

随机推荐