jQueryの単行テキストボックス操作

詳細
 
 
テキストボックスに必要な操作を行うことができます.今回は、フォーカスを取得してスタイルを変更することについて説明します.
 
 
まず、フォーカスについて説明します.フォーカスはページ上の画面に点滅する小さな縦線で、マウスクリックするとカーソルが得られ、Tabキーは設定したTabindexに従ってフォーカスを切り替えることができます.私たちはパスワードを入力したり、データをカーソルでクリックしたりして、フォーカスマウスを取得して離れたときにフォーカスを失いました.
 
まずフォームを作成します.HTMLコードは次のとおりです.
 

    

         
      
           

                 
               
           
           

                  
                
            
            

                     
                            
    

 
  
 
 
  
 
 
  
 
 
  
               ，                       ，          ，    CSS   ，    ：
 
  
 
 
  
inputs:focus .textarea:focus{
     border: 1px solid #f00;
     background: #fcc;
}
  
  
ただし,IE 6ではハイパーリンク  のhover  クラス   はサポートされておらず,この  jQueryで  を  できる.
  
  
まずCSSにfocusというスタイルを  します.
  
.focus{
      border: 1px solid #f00;
      background:  #fcc;
}
  
  
テキストにフォーカスを  および うイベントを  します.コードは のとおりです.
  
$(function(){
    $(":inputs").focus(function(){
         $(this).addClass("focus");
    }).blur(function(){
         $(this).removeClass("focus");
     });
});
  
  
  
  
  では   もIE 6で  の  が られるようになっている.テキストボックスのサイズを  したり、backgroundを  したり、ハイライトを  したりして、  のニーズに じて、  の  で のスタイルを  することもできます.