WEB前端开发 加入小组

353个成员 2938个话题 创建时间:2011-05-23

通过例子学习JQuery--文本框得到/失去焦点

发表于 2013-07-23 7917 次查看

问题提出:

文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点!

如果没有使用jQuery的话直接用对象.focus()就可以了,可是当我们使用了jQuery 这样$(”#nameInput”) 返回的就不是DOM对象了而是jQuery对象,这样的话$(”#nameInput”).focus()这个方法的意义也就变了,并不是使这个文本框获得焦点而是触发这个文本框所有绑定在onfocus的函数!

其实使用jQuery也非常简单将jQuery对象转化为一个DOM对象$(”#nameInput”)[0].focus() 简单的加一个[0] 便是我们想要的了!!

 

  例子名称:文本框得到/失去焦点

 

    效果1:文本框得到焦点时,背景颜色发生变化,失去焦点时背景颜色恢复。

    代码:

         $(document).ready(function()

           {
                  $(":input").focus(function(){  
                     $(this).addClass("focus");         
                 }).blur(function(){
                        $(this).removeClass("focus");
                     })
           })

  

  该例子中所用到的事件方法:

  a.focus(fn):在每一个匹配的focus事件中绑定一个处理函数。

    

     fn (Function) : 在每一个匹配元素的focus事件中绑定的处理函数。

     focus事件可以通过鼠标点击或者键盘上的Tab导航触发

 

  b.blur(fn):在每一个匹配元素的blur事件中绑定一个处理函数

 

     fn (Function) : 在每一个匹配元素的blur事件中绑定的处理函数。

 

    blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开时触发。

 

 效果2:文本框含有默认值,当文本框得到焦点时,文本框的默认值消失

代码:

     $(document).ready(function(){
           $(":input").focus(function(){
               $(this).addClass("focus");
                 if($(this).val() ==this.defaultValue){   //判断文本框的值是否是默认值
                  $(this).val(""); }

             }).blur(function(){
                $(this).removeClass("focus");
                  if ($(this).val() == '') {
                  $(this).val(this.defaultValue);
             }
             });
       })

发表回复
功能维护升级中,维护完成完后将再次开放,非常抱歉给您学习造成的不便。