文本框(input)获取焦点(onfocus)时样式改变的实现方法

许多重视用户体验的设计师都希望给文本框(input)加上 获取焦点或者鼠标悬停时的样式切换效果。其实很简单，我们只需要获取页面上的文本框，加上onfocus事件或者其他对应的事件即可。本文介绍了如何在 获取焦点时切换样式，明白原理后，实现其他效果就很简单了。


--------------------------------------------------------------



Javascript:

1. <script type= "text/javascript">
2. // 说明：文本框(input)获取焦点(onfocus)时样式改变的实现方法
3. // 整理：http://www.CodeBit.cn
4.  
5. // focusClass : 获取焦点时的样式
6. // normalClass : 正常状态下的样式
7. function focusInput (focusClass, normalClass ) {
8.     var elements = document. getElementsByTagName ( "input" );
9.     for ( var i= 0; i < elements. length; i++ ) {
10.         if (elements [i ]. type != "button" && elements [i ]. type != "submit" && elements [i ]. type != "reset" ) {
11.             elements [i ]. onfocus = function ( ) { this. className = focusClass; };
12.             elements [i ]. onblur = function ( ) { this. className = normalClass|| ''; };
13.         }
14.     }
15. }
16. </script>
17.  
    
    
    
    测试代码：
    HTML:

   
   

     
     

      
       
     
     

     
     

      
      <style type="text/css"> 
     
     

     
     

      
      .normalInput { 
     
     

     
     

      
          border:1px solid #ccc; 
     
     

     
     

      
      } 
     
     

     
     

      
      .focusInput { 
     
     

     
     

      
          border:1px solid #FFD42C; 
     
     

     
     

      
      } 
     
     

     
     

      
      </style> 
     
     

     
     

      
       
     
     

     
     

      
      <script type="text/javascript"> 
     
     

     
     

      
      window.onload = function () { 
     
     

     
     

      
          focusInput('focusInput', 'normalInput'); 
     
     

     
     

      
      } 
     
     

     
     

      
      </script> 
     
     

     
     

      
       
     
     

     
     

      
      文本框：
      
      <input type="text" class="normalInput" />