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>