カテゴリー : 2010年 10月

フォームに予めテキスト入れておいて、クリックしたら削除して、さらに色を変える方法

フォームに、「お名前を入力して下さい」のように、テキストを入れておいて、

実際にユーザが入力するとき(フォーカスがあたったとき)には、テキストをすべて削除する場合、下記jqueryプラグインを使うと簡単。

http://ajaxcssblog.com/jquery/fieldtag-watermark-inputfields/

今回はさらに、最初のテキストはグレーで表示したいけど、ユーザ入力時はクロにしたいというニーズがあったので、ちょっと書き換えてみた。

if(!this.changed){
$(this)
.val(“”)
.removeClass(opt.markedClass)
.css(“color”,”black”);
}

if(!this.changed){ $(this) .val(“”) .removeClass(opt.markedClass) .css(“color”,”black”); }

赤色部分を追加。

さらに、addTab部分も同様に、

.css(“color”,”grey”);

を追加。