blur事件以及focus事件使用实例

HTML代码

      

        

          

            
          
          
        
        

          

            
          
          
        
        

          
重置
          
登 录
        
      

利用jQ方法判断Dom对象获得跟失去焦点进行CSS样式变换

blur事件

$("#user").blur(function(){//失去焦点    
    $("#user-a").removeClass("input-active");    
    $("#user-b").removeClass("logo-active");
});
$("#password").blur(function(){    
   $("#password-a").removeClass("input-active");    
   $("#password-b").removeClass("logo-active");
});

focus事件

$("#user").focus(function(){//获得焦点    
    $("#user-a").addClass("input-active");    
    $("#user-b").addClass("logo-active");
});
$("#password").focus(function(){    
    $("#password-a").addClass("input-active");    
    $("#password-b").addClass("logo-active");
});