スポンサーリンク

jQueryで,自作のシンプルな「プレースホルダ」を作ってみる

jQueryで,自作のシンプルな「プレースホルダ」を作ってみるための実装方法の例。

ブラウザで動作確認可能なサンプルコード。

<html>
<head>
<title>自作のjQueryプレースホルダの動作テスト</title>
<script type="text/javascript" 
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">

/* DOMが操作可能になった時に実行 */
$(function(){
	
	// プレースホルダを格納する配列
	var input_value = []
	
	// プレースホルダを収集
	$("input").each(function(){
		input_value.push( $(this).val() );
	});

	// input要素を初期化してイベントをセット
	$("input")
		.each(function(i){
			// 文字色変更
			$(this)
				.css({color : "#ccc"})
				.bind("focus", function(){
					// フォーカス時には,ユーザ未入力であればvalueを消す
					if( ! $(this).data( "has_user_input" ) ){
						$(this)
							.val("")
							.css({color : "#000"})
						;
					}
				})
				.bind("blur", function(){
					// ブラー時に空であれば,
					// ユーザ入力ありのフラグを消してプレースホルダを戻す
					if( $(this).val() == "" ){
						$(this)
							.val( input_value[i] )
							.css({color : "#ccc"})
							.data( "has_user_input", false )
						;
					}
					else
					{
						// ブラー時に空でなければ,
						// ユーザ入力ありのフラグを立てて値をそのままにする
						$(this)
							.data( "has_user_input", true )
						;
					}
				})
			;
		})
	;
	// input要素の初期化完了

});

</script>
</head>
<body>
    
    <input type="text" value="hoge"><br>
    <input type="text" value="fuga"><br>
    <input type="text" value="boo"><br>
    <input type="text" value="moge"><br>
    <input type="text" value="muga"><br>
    
</body>
</html>

コードの解説

コードのひな型は,下記のはてなの質問の形を保つようにした。

本当は,プレースホルダの値を配列に持たせるのは,jQueryらしいやり方ではない。

各DOM要素ごとに,dataメソッドで「自分のプレースホルダの値」を記憶させておくのが良いだろう。

その辺を考えて,自分で書きなおしてみるのを宿題にしてみるのはどうだろう。


そうすれば,はじめからおわりまでの処理は全部,メソッドチェインでつなげて1文で書き下せる。

それこそがjQueryの特徴なのだ。

文の外部に,配列の宣言とか,forループとかが現れるとしたら,jQueryの特徴を使い損ねている。

ちなみに,jQueryにはeach()メソッドを重宝するから,for文はそもそも全く出現しない。

参考資料

jqueryで質問をさせてください。 フォームの部分で、未入力の場..
http://q.hatena.ne.jp/1383273915

  • 発端になった質問
    • thisのスコープが間違っている。
    • eachを使っていない。
    • focusとblurの定義箇所がなぜか分離されている。
    • ユーザが自分の値を入力し終えてから再度フォーカスを当てた場合にも値がクリアされてしまう。
    • one()なので一度しかイベントが発生しない。


HTML5 の placeholder 属性を jQuery でクロスブラウザに – terkel.jp
http://terkel.jp/archives/2010/07/htm...

  • 一般的なプレースホルダ。


jQueryの読み込み方法|jQuery Tips|Ajax|PHP & JavaScript Room
http://phpjavascriptroom.com/?t=ajax&...

  • jQueryを使ったHTMLコードのひな型。


CDNに設置されたjQueryファイルを使う - jQueryファイルの読み込み - jQueryの使い方
http://www.ajaxtower.jp/jquery/ini/in...

  • script要素で,jQueryをWeb上から読み込む方法。


each(callback) - jQuery 日本語リファレンス
http://semooh.jp/jquery/api/core/each...

  • eachメソッドの中ではthisは各要素を指す。インデックスはeach内のクロージャに引数として渡る。


one(type, [data], fn) - jQuery 日本語リファレンス
http://semooh.jp/jquery/api/events/on...

  • 一度だけイベントを発生させる。


bind(type, [data], fn) - jQuery 日本語リファレンス
http://semooh.jp/jquery/api/events/bi...

  • イベントリスナの定義。


jQuery を使用し、DOM に基づいてデータを格納、取得する
http://www.ibm.com/developerworks/jp/...

  • dataメソッドの使い方。各要素ごとにデータを持たせたり,フラグを立てたりするのに使う。