HTML5のplaceholder属性をIEでも使えるようにするjQueryプラグイン「ah-placeholder.js」

@kasumiiです。こんにちは。

例えば名前の入力フィールドに薄い色で「例：山田太郎」などと表示しておき、入力フィールドをクリックしてフォーカスがあたったらテキストを消すという処理はよく使うと思います。

この処理の実装方法はたくさんありますが、いくつか試してみた結果「ah-placeholder.js」というjQueryプラグインが一番スマートだったので使い方などをメモメモ。

HTML5のplaceholder属性を代替するjQueryプラグイン(ah-placeholder.js) ::ハブろぐ

HTML5に対応しているブラウザであれば以下のように書くだけでOKなので、プラグインも必要ないしとっても便利です。

<input type="text" name="yourname" placeholder="例：山田太郎">

ただしIE6-9まではこの属性に対応していないため、対応させるには別の方法を考えないといけません。

入力フォームにデフォルトでテキストを表示するJavaScriptやjQueryプラグインはたくさんあって、いろいろ見てみたのですが「input要素のvalueやtitleにテキストを入れている」または「テキストをcssの絶対配置でinput要素の上に配置している」ものが多かったです。

せっかく便利なプレースホルダが使えるのだから、一番良いのは、

HTML5のplaceholder属性が使える場合は何もしないで、IEなどのplaceholder属性が使えない場合のみプラグインで機能を代替する

という方法です。それを実現してくれるのが「ah-placeholder.js」というわけ。

以下のページから「jquery.ah-placeholder.js」をダウンロード。

jquery.ah-placeholder/jquery.ah-placeholder.js at master · ahomu/jquery.ah-placeholder

jQueryとah-placeholderを読み込みます。

<script type="text/javascript" src="jquery-1.8.0.min.js">
<script type="text/javascript" src="jquery.ah-placeholder.js">

そして各種設定。

<script>
$(function() {
$('[placeholder]').ahPlaceholder({
	placeholderColor : 'silver',
	placeholderAttr : 'placeholder',
	likeApple : false
	});
});
</script>

placeholder属性を持つ要素を対象にします。

「placeholderColor」はプレースホルダのテキスト色。デフォルトはsilver。

「placeholderAttr」でプレースホルダとして使う属性を指定。ここを「title」にすると、title属性の値を入力フィールドに表示してくれます。

「likeApple」ではプレースホルダのテキストをどのタイミングで消すかを設定できます。

Chromeなどのplaceholder
inputにフォーカスした時点で、placeholderのテキストが消えます

iOSやSafari5.1以降のplaceholder
フォーカス後にテキストを入力し始めた時点で、placehoderのテキストが消えます

デフォルトではフォームにフォーカスがあたったタイミングでテキストが消えますが、「likeApple」をtrueにすると、iOSやSafariのようにテキストを入力しはじめたタイミングで消えるようになります。

あとはフォーム部分のHTMLでplaceholder属性を指定してあげればOK。

<input type="text" name="yourname" placeholder="例：山田太郎">

HTML5に対応しているブラウザの場合はスクリプトによる処理を行わず、IE6-9などの対応していないブラウザのときだけ同じような動作をするようにうまくはからってくれます。

いやーこれは本当にありがたい。しばらくこのプラグインのお世話になろうと思います。

【参考】プレースホルダとHTML5のplaceholder属性
【参考】placeholder 属性と jQuery で IE にもプレースホルダを | WWW WATCH

HTML5のplaceholder属性

ah-placeholder.js の設置方法