テキストボックスのデフォルト値を表示・非表示するJavascript

カテゴリ：Javascript小技 2009年2月23日 18:11

今回はちょっとした Tips というか、こんな風にできたの？（と自分で思った）っていうのを書いてみたいと思います。~~最近、ますます CSS から遠ざかってる気がする~~

今回のサンプルを使うタイミングとしては、検索のテキストボックスなどにあらかじめ「検索キーワードを入力」のようにサンプルなんかを表示しておき、テキストボックスがフォーカスされたらその文字を消す、というようなもの。n

トグルテキストボックスデモ

え、こんな書き方できるの？！と思いませんでしょうか。
自分は思いましたｗ
大抵の場合、onclick="chek();"などのように実行する関数を設定するだけだと思います。（場合によってはreturnをつけたり、複数関数を設定したりはありますが）n

しかしこのonで始まるイベントハンドラ内には script タグで記述するように自由に改行を含めることができます。
言ってみれば、script タグ内に書けることはすべて書ける、ということです。n

さて、今回の肝となるのは改行ではありません。
（実際、見やすさを無視すれば全部 1 行で書くことができます）
肝となるのは、onfocus内（その他にも onclick など他のものも同様です）で onfocusを上書きしているところ。n

最初の onfocus の実行時に、自身の_defaultValueに元々設定されている valueを保存します。
（この _defaultValue は任意の変数です。DOM はオブジェクトなので自由に変数を追加することができます）n

続いて自身のvalueを空白に設定したのち、onblurとonfocusにそれぞれ関数を設定しています。
こうすることで、2 回目以降の onfocus 時には最初の 2 行は実行されなくなります。n

処理内容としては、フォーカスが外れたときにもし空白なら初期のテキストを表示しなおし、フォーカスが当たったときにもし初期値の場合はまた空白に戻す、という処理を行っています。n

これを利用することの利点としては、現在のテキストボックスの値がどうなのかを識別するためのフラグ用の変数や、デフォルトの値を保持しておく変数を用意する必要がなく、またデフォルトのテキストがなんであっても確実に "デフォルトの値かどうか" を識別することができます。n

ちなみに、上記のものを関数かすると以下のような感じで書くことができます。n

この記事のカテゴリー一覧を見る⇒Javascript小技

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/123