昨日紹介した「jQueryを使って入力フォームでフォーカス時に背景色を変えるスクリプトのサンプル」に
引き続き、入力フォーム系で簡単に使えるサンプルSCRIPTの紹介をしてみます。

jQueryの「.after()」メソッドを使って、フォーカス時に入力の際の注意文など、
メッセージテキストを追加することができる動作について、
動作サンプルを元に構成について紹介します。

jQuery INPUT FOCUS【SAMPLE】

<input>と<textarea>をクリックなどでフォーカス状態にすると
フォーム右に「必須項目」の文字列を表示させています。

この動作の内部構成について。

前回同様、HTML側では特別な指定はしなくていいので
単純な入力系エリア用の<input type=”text”>や<textarea>といったタグを記述しておきます。

そしてCSSでは、メッセージテキストを表示する際の
装飾等を指定するためのクラス「.msg」を記述します。(ここのクラス名は任意で変更可能)

◆CSS
.msg {
	padding-left: 10px;
	color: #ff0000;
	font-weight: bold;
}

そしてスクリプト。

<input type=”text”>や<textarea>タグに対してフォーカス状態になった際、
タグの後に「<span class=”msg”>必須項目</span>」のソースを追加し、
フォーカスが外れた際には「span.msg」をソース上から削除する、と言う動作。
※今回のサンプルには前回のフォーカス時に背景色を変化させる動作についても併せて実装しています。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("input, textarea").focus(function(){
		$(this).addClass('focus');
		$(this).after('<span class="msg">必須項目</span>');
	}).blur(function(){
		$(this).removeClass("focus");
		$("span.msg").remove();
	});
});
</script>

「.after()」を用いて、<input>や<textarea>にフォーカスした際に
自身のタグの後ろ(after)に<span>タグを追加しています。
今回のサンプルでは<span>タグを使用していますが、ここは他のタグで構成することももちろん可能です。

全体構成についてはこれだけです。

実際の入力フォームで「必須項目」をユーザーにアナウンスする方法としては
フォーカス時に表示させる、というよりかはページ上にそのまま記載してある方がいいと思いますが、
入力フォーム周りには「必須項目」についての記載の他に「記述例」や「最大入力文字数」など
何かと注意書きが多くなってしまう事があります。

その様な際、今回のサンプルの様な形で、始めから表示しておく必要が無いメッセージについては
フォーカス時のみの表示にする、といった方法にすることで、
フォーム周りの見た目をすっきりさせることが出来るようにも思います。

フォーム周りのテキスト表示に困った際に是非。。。

【参考記事】
ASCII.jp:jQueryによるフォームのデザインの基礎(後編)|Web制作の現場で使えるjQuery UIデザイン入門

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryを使って入力フォームにフォーカスされた際にメッセージテキストを表示するスクリプトのサンプル

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner