텍스트 상자 (input) 에서 초점 (onfocus) 을 가 져 올 때 스타일 이 바 뀌 는 방법

사용자 체험 을 중시 하 는 많은 디자이너 들 이 텍스트 상자 (input) 에 추가 하 기 를 원한 다.
초점 이나 마우스 가 멈 췄 을 때의 스타일 전환 효 과 를 가 져 옵 니 다.사실은 매우 간단 합 니 다. 우 리 는 페이지 의 텍스트 상 자 를 가 져 오고 onfocus 이벤트 나 다른 대응 하 는 사건 을 추가 하면 됩 니 다.본문 은 어떻게
초점 을 얻 을 때 스타일 을 바 꾸 고 원 리 를 알 면 다른 효 과 를 실현 하 는 것 이 간단 합 니 다.
--------------------------------------------------------------
Javascript:
"text/javascript">

/ / 설명: 텍스트 상자 (input) 에서 초점 (onfocus) 을 가 져 올 때 스타일 이 바 뀌 는 방법

/ / 정리:http://www.CodeBit.cn

 

/ / focusClass: 초점 을 가 져 올 때의 스타일

/ / normalClass: 정상 상태의 스타일

function focusInput
(focusClass, normalClass
)
{

   
var elements = document.
getElementsByTagName
(
"input"
);

   
for
(
var i=
0; i < elements.
length; i++
)
{

       
if
(elements
[i
].
type !=
"button" && elements
[i
].
type !=
"submit" && elements
[i
].
type !=
"reset"
)
{

            elements
[i
].
onfocus =
function
(
)
{
this.
className = focusClass;
};

            elements
[i
].
onblur =
function
(
)
{
this.
className = normalClass||
'';
};

       
}

   
}

}



 
테스트 코드: 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" />