この記事は賞味期限切れです。（更新から1年が経過しています）

HTML5でフォーム関連の要素は色々と刷新されて便利になりそうですが、
その新機能のひとつに、ガイドテキストをうっすら表示させるplaceholderなる物があります。
今日はそのplaceholderをjQueryで表示させてみるちいさな実験。

placeholderについて

何も入力されていないテキストインプットに、
例えば「名前を入力してください」的なガイドテキストを薄く表示させる為の属性。
IEをのぞく多くのモダンブラウザでは既に実装されています。

ちなみにこんなやつです。↓

何を入力したらいいのかがわかりやすい！

• The Current State of HTML5 Forms · Wufoo

こちらのリンク先では、フォームエレメントにかかわる新機能の
各ブラウザの対応状況が紹介されていました。
IE9があまりにも残念で私は悲しい。

JavaScriptで実装してみる

どのブラウザでも使えるようにするために、JavaScriptで実装してみます。
仕組みはシンプルに。

1. placeholder属性のかわりにdata-placeholder属性でガイドテキストの値を設定する
2. blurの時にvalueが空っぽだったらdata-placeholderの内容に差し替える
3. focusの時にvalueがdata-placeholderの内容と同じ場合は空っぽにする
4. ガイドテキスト表示時のCSSクラスを用意する

作ってみたもの

ソース

mach3/js-jquery-placeholder – GitHub

デモ

jquery.placeholder.js – jsdo.it – Share JavaScript, HTML5 and CSS

使い方

HTML

<input type="text" value="" data-placeholder="Input your name" class="mytext" />

data-placeholder属性に表示させたいガイドテキストを入力します。

CSS

.jquery-placeholder {
    color:#cccccc;
}

ガイドテキスト表示時のスタイルを設定。
初期設定では、jquery-placeholderクラスとなります。
JavaScriptのオプションで変更できます。

JavaScript

$("input.mytext").placeholder();

クラスの設定を変更したい場合は、文字列またはオブジェクトで引数を渡します。

$("input.mytext").placeholder({
    defaultClass : "myclass"
});
// または
$("input.mytext").placeholder( "myclass" );

注意事項

（2011/03/31 18:20　追記）

このスクリプトですが、いくつか問題があります。

1. アラートでblurイベントがスルーされる
2. 送信時に値をクリアしないとplaceholderの値を送ってしまう

2番目の問題については、つい先ほどオプション「resetOnSubmit」を追加しました。
これをtrueにするとsubmit時にplaceholderの値から変わってない場合は値をクリアします。
なぜわざわざオプションにしたのかというと、
Ajaxとかでフォームを使いたい時にクリアしないほうが都合がいいケースもあるかな？と。

1番目はちょっと調査＋考え中…。

まとめ

IEが最新版の9でも対応してないというのは若干ショックではありますが、
見た目的にも使い勝手的にも取り入れたい表現ですね。

---

2011/3/31 18:20

オプションの追加、注意事項追記