首页 > 代码库 > jQuery 文本框得失焦点应用

jQuery 文本框得失焦点应用

一、文本框得失焦点一种是改变文本框的样式
    得到焦点:

         
    失去焦点

          
二、文本框得失焦点另一种是改变文本框的值
    得到焦点:

          
    失去焦点:

     

三、jQuery 得失焦点代码

     1、改变文本框样式代码

      1> CSS代码  

     .focus {          border: 1px solid #f00;         background: #fcc;      } 

2>jQuery代码 (:input匹配 所有 input, textarea, select 和 button 元素)
    <script type="text/javascript">    $(function(){        $(":input").focus(function(){              $(this).addClass("focus");        }).blur(function(){              $(this).removeClass("focus");        });    })    </script>

     2、改变文本框值的代码

       1>jQuery代码

       用:input匹配所有的input元素,当获取焦点时,就添加样式focus,通过$(this)自动识别当前的元素。

       focus()方法是获取焦点事件发生时执行的函数。

       blur()方法是失去焦点事件发生时执行的函数。

    <script type="text/javascript">       $(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);             }        });    })    </script>

 

jQuery 文本框得失焦点应用