JQuery를 이용하여 In Focus와 Out Focus 발생 시 CSS 조작

한개 화면의 HTML내에서 Input Control을 많이 사용해야 할 경우 현재의 Focus가 위치한 Input Control의 Background Color를 

변경 하거나 테두리 Line의 Color를 변경 하고자 할때 각각의 Input Control에 대하여 Event처리를 할 필요 없이

JQuery를 통하여 간단하게 Event등록과 Event발생 시 CSS조작을 할수 있다. 

아래의 예제는 Input Control의 속성 중 text와 password 타입으로 된 Input Control에 대하여

Event를 등록하고 해당 Event 발생 시 동적으로 CSS 조작으로 Input Control의 테투리 Color를 변경하는 방법이다.

CSS의 속성을 변경하여 Background색상을 변경하거나 JQuery에서 제공하는 Animate를 사용하여 보다 시각적인 

기능을 구현할수 있다.

$(document).ready(function(e) { 
   try { 
     $('input[type=text]').focus(function() 
       { $(this).css('border-color','red'); 
      });	    

     $('input[type=text]').blur(function() { 
       $(this).css('border-color','#c0c0c0'); 
      });	  

     $('input[type=password]').focus(function() { 
       $(this).css('border-color','red'); 
     });		  

     $('input[type=password]').blur(function() { 
       $(this).css('border-color','#c0c0c0');  
     }); 
   } 
   catch(e) { 
      alert(e.message); 
   } 
});