未入力状態のテキストフォームにグレーのデフォルト文字を表示し、フォーカスがあたったり文字が入力されたら消えるようにしたい

[Sponsored Link]


当ブログでは「役に立った!」「写真使いました!」などご参考頂いた方からのAmazonギフト券の寄付をお待ち致しております。

Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrPin on PinterestShare on LinkedInDigg this

最近はお問い合わせや予約のフォームで一般的になりつつある、テキストフォームに入力説明や入力例といったデフォルト文字をグレーで淡く表示しておき、入力フォームをクリックしてフォーカスが当たったり、何か文字が入力されたりしたらデフォルト文字を消す。逆に入力文字がすべて空になった場合はふたたびデフォルト文字を淡く表示するといった方式。これをjQueryで実現してみた。

たとえば、以下のような入力フォームを設定する。
この例ではid属性に「target1」を指定している。またtitle属性には、未入力時のデフォルト文字を指定している。ここで指定することで、いちいちJavaScript中に文字列を分散して保存しなくてもいいようにできる。デフォルト文字も含めてHTMLを修正するだけでよく、JavaScriptファイルにまで手を伸ばさなくてもよい。

<input type="text" id="target" title="入力してください">

jQueryのコードは以下のように実装してみた。

$(document).ready(function(){
	var target;

	$('#target').show(function(){
		target = $(this).attr('title');
		if ($(this).val() == target || $(this).val() == '')
			$(this).css({color:'gray'}).val(target);
	}).focus(function(){
		if ($(this).val() == target)
			$(this).css({color:'black'}).val('');
	}).blur(function(){
		if ($(this).val() == '')
			$(this).css({color:'gray'}).val(target);
	});
});

2行目でドキュメント全体の.ready()メソッドのイベントハンドラ内をスコープ範囲とする変数targetを設定している。この変数には、テキスト入力フォームが表示されたタイミングで取得するデフォルト文字を保存する。具体的に取得しているのが5行目である。
4行目は入力フォームの.show()メソッドのイベントハンドラを設定している。さきのHTMLコードが表示されたときにこのメソッドがコールバックされるので、その時点で行う処理を記述する。
5行目はさきほど説明したとおり、デフォルト文字列をtitle属性から取得し、その文字を変数targetに保存する処理だ。以後、このtarget変数を使って処理を進める。
6行目は未入力状態の判定を行っている。入力フォームの中の文字がtarget変数の中身、すなわちtitle属性に書かれたデフォルト文字が含まれているか、あるいは未入力かという状態を判定している。なお、ここでは特に全半角空白文字のみが入力されている状態は、文字が入力されているものとみなされる。空白文字だけで構成された入力を未入力とみなしたい場合は正規表現等で識別する必要があるだろう。
7行目は、6行目の条件に一致した場合、つまり未入力であると判断した場合の処理を実行する。.css()メソッドで文字色をgray(灰色)に指定し、入力内容をデフォルト文字にしている。
8行目は入力エリアにフォーカスが当たった場合のイベントハンドラの実装である。
9行目で未入力状態かどうかを判定している。未入力状態の場合はデフォルト文字が入れられているので(7行目・13行目)、フォーカス時点での入力内容とデフォルト文字を比較し、一致したら未入力状態であったと認識したら、10行目に進んで文字色をblack(黒)で設定してデフォルト文字を消す。
11行目は逆にフォーカスが外れた場合のイベントハンドラの実装だ。
12行目でフォーカスが外れた時点での入力内容が空であるかどうかを判定し、空だった場合は13行目に進み文字色をgray(灰色)に設定してからデフォルト文字を入力エリアに突っ込む。

実装例とそのサンプルコードは、以下に示しておきたい。

■未入力テキストフォームにグレーのデフォルト文字を
http://zura.org/prog/js/graydefaultinput/

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)現場で役立つjQueryデザインパーツライブラリ実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」やさしくはじめるWebデザイナーのためのjQueryの学校10日でおぼえるjQuery入門教室 第2版フォーカス! 利益を出しつづける会社にする究極の方法Amazon Kindle Fire HDX スタンド付き ORIGAMI 合皮 カバー/ケース グレー  (Kindle Fire HDX 7専用)ELECOM キヤノンインクジェットプリンタ専用詰め替えインク BCI-326対応 グレー 5回 THC-326GY5デフォルト債務不履行 (角川文庫)右利き・左利き両対応 ごろごろ寝ながら操作できる ワイヤレス トラックボールマウス   airm01wお家が焼き鳥屋さん!宮崎県産若鶏  焼き鳥50本セット【冷凍】焼肉 バーベキューにおすすめ

Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrPin on PinterestShare on LinkedInDigg this

当ブログでは「役に立った!」「写真使いました!」などご参考頂いた方からのAmazonギフト券の寄付をお待ち致しております。


Atsushi Ezura について

ナチュラルな女性のしぐさや表情を撮りたいIT系エンジニア。女性モデル募集中プロフィール
カテゴリー: JavaScript, jQuery, ウェブ, コンピュータ タグ: , , , パーマリンク

コメントを残す

メールアドレスが公開されることはありません。