入力フォームの上にあらかじめ入力例や注意書きを表示する「プレースホルダ(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="http://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>の3種類のみにしてあります。

<input>タグや<textarea>タグの周りを、大枠の<span>で囲った後、
実際のプレースホルダの役目を果たす、クラスの付いた<span class=”placeholder”>を
<input>の上に被せています。

<span class=”placeholder”>にはそれぞれの入力フォームの
title属性に入力されているテキストが入るようになっています。

title属性の内容をvalue属性に入れ換えて
プレースホルダとして表示するプラグインは良くありますが
その場合、未入力の場合でもvalueに値が入っていることになってしまい、
空の処理が正確に行えなくなってしまうことがありますが
今回紹介しているスクリプトでは、
title属性の値を<span>タグに入れて表示する構成にしているので
その様な影響はありません。

まだまだHTML5だけでサイトを制作することはIEの問題やらで難しかったりするので
jQueryで簡単にこのプレースホルダを実装できるようにしておくと何かと役に立つ気がしています。

入力フォームでプレースホルダ(placeholder)UIを実装する際の参考に。。。

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

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

Related Posts

Comments (3)

  • kinoyasu | 2013.07.04 20:16

    師匠と勝手に呼ばさせていただいてます!いつもこのサイトに訪問して勉強してます!本当にためになります。分かり易いし読みやすい!師匠のサイトは私のバイブルとなってます。猫かわいいですね、もしいつかお逢いする機会が有りましたら、お礼にマタタビとキャットフードいっぱい差し上げますね。感謝です。!!!!!
    応援しています。

  • BlackFlag | 2013.07.05 0:13

    >kinoyasuさん
    コメントありがとうございます。
    当ブログのスクリプトをいろいろと
    ご活用いただいている様で嬉しく思っております。

    師匠と言われるほどの者でもないですが
    当ブログの内容が分かり易いと言っていただけると
    大変嬉しく思います。

    今後も有意義な情報を発信していけるよう
    精進させていただきます。

    今後ともよろしくお願いします。

  • Webデザイナーが捗る!知識を増やす最近のトレンドまとめ | コムテブログ | 2014.09.29 8:35

    [...] jQueryで入力フォームの上にテキストを表示する「プレースホルダ(placeholder)」を作ってみる | BlackFlag [...]







コメント内容

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

jQueryで入力フォームの上にテキストを表示する「プレースホルダ(placeholder)」を作ってみる

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR