jQueryでテキストの初期値をフォーカス時に消す方法
jQueryでテキストの初期値をフォーカス時に消すには、
下記タグで実現できる
<ul> <li><input type="text" value="ユーザー名" /></li> <li><input type="text" value="メールアドレス" /></li> </ul>
input { color: #ccc; } input .textFocus { color: #333333 !important; }
jQuery(document).ready(function(){ // textBox は テキストボックス全てを指定。 var textBox = jQuery("input:text"); // 条件は テキストボックスにフォーカスされたら。 textBox.focus(function(){ // class名 "textFocus" を追加。(文字色を濃くする) jQuery(this).addClass("textFocus"); // if条件は HTMLで設定した初期値(value)のままかどうか if(this.value == this.defaultValue){ // trueなら テキストボックスを 空 にする jQuery(this).val(''); } // 逆に テキストボックスからフォーカスが失われたとき。 }).blur(function(){ // if条件は テキストボックスの数値が 空(0文字)のとき if(jQuery(this).val() == ''){ // テキストボックスの中身を 元の初期値(value)にする // classも外す(文字色を元の薄い色に戻す) jQuery(this).val(this.defaultValue).removeClass("textFocus"); } }); });