jQueryとフォーム:背景を操作
フォームシステム自体は作れませんが、要望があればデザインを行なっております。
デモ用につけてみた演出ですが、今後どこかで使えそうなので、書き留めておこうと思います。
今回はデフォルトでテキストエリアの背景色を入れて、
入力があれば背景色をなくすという演出です。
トリガーはフォーカスなのですが、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 へ変更しました。