jQuery

CSS3を使わずjQueryで、テキストボックスの初期値の文字をフォーカスした時に消えるようにするやり方(IEもいけるよ!)

Time to say good bye

完成サンプルです

試しにクリックしたり、文字を入れてみてください。入力しようとすると、ちゃんと文字が消えて空っぽになります。
また、元々の文字は薄いグレーなのに、入力するときには濃い色の文字になってます。

何をどうしているのか

まずはテキストボックスの初期値です。初めからテキストボックスに文字を入れておくには value を使います。

[html]

<ul>
<li><input type="text" value="ユーザー名" /></li>
<li><input type="text" value="メールアドレス" /></li>
</ul>

[/html]

そしてこのままだと、他の文字と同じように 濃い色の文字色のままです。とりあえずCSSでうすくしておきます。

[css]

input[type="text"] {
color: #ccc;
}

[/css]

これで ぱっと見はよくあるフォームの見た目のようになりました。ただ、この状態だと当然ですが カーソルを当てても元の文字が消えません。
カーソルを当てて入力できる状態(フォーカス)にしたときは 先ほどのvalueで設定した初期値を まっさらに消してしまわないといけないのです。

コードです

[javascript]

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");
}
});

});

[/javascript]

詳細はコードに書いてますので見てくださいw
カンタンに説明すると、テキストボックスにフォーカスしたときは

フォーカスする

初期値(value)かどうか判定する

初期値なら文字消去。別の文字がすでに入力されてたら消さない

文字を濃くする(classを追加)

です。逆に フォーカスを失った(他のどっかしらをクリックしたりして テキストボックスからカーソルが外れた)場合はこうです。

フォーカスを失う

空(0文字) かどうか判定する

空(0文字)なら テキストボックスの値を初期値に戻す
別の文字がすでに入力されてたら戻さないでそのまま

文字をうすくする(classを外す)

としてるだけです。
これでこのjQueryを使用しているページのテキストボックスで、初期値を指定しているものは 全て適用されますので楽ちんです(*´꒳`*)

また、特定のテキストボックスだけに指定したい場合、idなんかで指定してやると吉かもしれません。今回でいうと、指定したいテキストボックスに直にidを振ってあげて、変数 textBox にそのidをまんま代入したらOKです。

じつはHTML5だと…

こんなことコチョコチョしなくても、バシッとあるんです。jQuery(゚⊿゚)イラネ

これですよ。さっきのと動作はほぼ変わらず。

[html]

<input type="text" placeholder="パスワード" />

[/html]

うわー。ねぇ。楽勝です。

でも、HTML5だと IE8以下のブラウザで使えないので。jQueryでやったほうが やってやった感もあるし。えぇ。

まあ、現状はまだまだHTML5だけでいくのもアレなので、使い分けなんかでいいのではないのでしょうか。