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メソッドの使い方。各要素ごとにデータを持たせたり,フラグを立てたりするのに使う。