昨日紹介した「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="https://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デザイン入門