入力フォームの上にあらかじめ入力例や注意書きを表示する「プレースホルダ（placeholder）」。
入力する際の注意書きや入力例などを予め表示しておくことで、ユーザーに優しいUIにすることができます。
HTML5ではplaceholder属性という、新たな属性として簡単にプレースホルダを表示できるようになっていますが
HTML5に対応していないブラウザではJSなどを使って実装しなくてはいけません。
このプレースホルダを表示するjQueryプラグインも多々ありますが
シンプルなスクリプト構成で実装できないか、試しにやってみたので紹介してみます。
jQueryで入力フォームの上にテキストを表示する「プレースホルダ（placeholder）」
まずは実装サンプルから。
下記の入力フォーム（INPUTテキスト、パスワード、テキストエリア）にフォーカスすると
表示されているテキストが消えます。
入力フォームからフォーカスが外れた際に、
フォーム内に何か任意のテキストが入力されていると
プレースホルダとして表示していたテキストは非表示になり
何も入力されていなければ再度プレースホルダの内容が表示されます。
実装方法についてまずHTMLから。
HTMLソースには、プレースホルダとして入力するテキストを
title属性を使って入力します。
◆HTML ・名前<br /> <input type="text" title="名前を入力してください" /> ・パスワード<br /> <input type="password" title="パスワードを入力してください" /> ・コメント<br /> <textarea title="コメントを入力してください"></textarea>
CSSは特に動作には影響しないので割愛します。
そして、プレースホルダを実装するスクリプトは以下のようになります。
◆SCRIPT
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).load(function(){
$('input[type=text],input[type=password],textarea').each(function(){
var thisTitle = $(this).attr('title');
if(!(thisTitle === '')){
$(this).wrapAll('<span style="text-align:left;display:inline-block;position:relative;"></span>');
$(this).parent('span').append('<span class="placeholder">' + thisTitle + '</span>');
$('.placeholder').css({
top:'4px',
left:'5px',
fontSize:'100%',
lineHeight:'120%',
textAlign:'left',
color:'#999',
overflow:'hidden',
position:'absolute',
zIndex:'99'
}).click(function(){
$(this).prev().focus();
});
$(this).focus(function(){
$(this).next('span').css({display:'none'});
});
$(this).blur(function(){
var thisVal = $(this).val();
if(thisVal === ''){
$(this).next('span').css({display:'inline-block'});
} else {
$(this).next('span').css({display:'none'});
}
});
var thisVal = $(this).val();
if(thisVal === ''){
$(this).next('span').css({display:'inline-block'});
} else {
$(this).next('span').css({display:'none'});
}
}
});
});
});
</script>
今回のスクリプトではプレースホルダを実装する対象は
＜input＞タグの「type=”text”」と「type=”password”」と＜textarea＞の３種類のみにしてあります。
＜input＞タグや＜textarea＞タグの周りを、大枠の＜span＞で囲った後、
実際のプレースホルダの役目を果たす、クラスの付いた＜span class=”placeholder”＞を
＜input＞の上に被せています。
＜span class=”placeholder”＞にはそれぞれの入力フォームの
title属性に入力されているテキストが入るようになっています。
title属性の内容をvalue属性に入れ換えて
プレースホルダとして表示するプラグインは良くありますが
その場合、未入力の場合でもvalueに値が入っていることになってしまい、
空の処理が正確に行えなくなってしまうことがありますが
今回紹介しているスクリプトでは、
title属性の値を＜span＞タグに入れて表示する構成にしているので
その様な影響はありません。
まだまだHTML5だけでサイトを制作することはIEの問題やらで難しかったりするので
jQueryで簡単にこのプレースホルダを実装できるようにしておくと何かと役に立つ気がしています。
入力フォームでプレースホルダ（placeholder）UIを実装する際の参考に。。。