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

2012.9.8 jQuery time_to_say_good-bye.png

こんにちは! また病院に運ばれて、9月10日に検査に行きます!30代怖い! いわだて (@dutchisover) です!

Time to say good bye

完成サンプルです

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

何をどうしているのか

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

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

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

コードです

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

フォーカスする

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

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

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

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

フォーカスを失う

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

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

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

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

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

じつはHTML5だと…

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

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

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

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

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

最近の記事

Sponsored