jQueryとフォーム:背景を操作

top2012_1030.jpgフォームシステム自体は作れませんが、要望があればデザインを行なっております。
デモ用につけてみた演出ですが、今後どこかで使えそうなので、書き留めておこうと思います。

Demoはこちら

今回はデフォルトでテキストエリアの背景色を入れて、
入力があれば背景色をなくすという演出です。
トリガーはフォーカスなのですが、jQueryのchangeを使用します!

■jQuery

$(function() {
//デフォルトで背景色を入れておく
     var InputField = $(".InputText tr td input");
     InputField.css({
     background:"#e0e0e0"
     });
					
	//changeを使用してテキストエリア内を監視!
     InputField.change(function() {
	//テキストエリアの文字を格納
          var inputitem = $(this).val().length;
          
          if(inputitem > 0){
               //テキストエリアの文字が1以上になったらという条件
               $(this).css({
               background:"transparent"
               });
          } else {
               $(this).css({
               background:"#e0e0e0"
               });
          }
     });
});

追記 $(InputField)を InputField へ変更しました。