placeholder 属性と jQuery で IE にもプレースホルダを

フォームの入力コントロール （input とか textarea） に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用する （プレースホルダ） なんてことはよくやります。

HTML5 では、プレースホルダを指定する属性として、まさにそのままの名前が付いた、placeholder 属性が新たに追加され、ブラウザさえ対応していればとても簡単に実現可能になっていますが、今のところ IE が対応していないのが悲しいところ…

で、よくやる代替策として、jQuery プラグインなどで placeholder 属性と同様の動作を実現するってことが行われるわけですが、この手のプラグインは、value 属性や title 属性に入れた値で代用したり、data-* 属性 （例えば data-placeholder などとして） に入れた値で代用するようなものが多く、今後 IE も含めて、主要なブラウザが全て placeholder 属性に対応したとき、移行のためにはフォームを修正しなければなりません。

なら、最初から placeholder 属性を使っておいて、jQuery プラグインは placeholder 属性に未対応の環境でだけ働いてもらうようにすれば楽ちんですよねということで、そんな用途にぴったりの jQuery プラグイン 「ah-placeholder.js」 を ハブろぐ さんが公開してくれていますので紹介と使い方をまとめてみようと思います。

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

placeholder 属性とは

まずは、placeholder 属性についてですが、前述の通り、HTML5 で新たに追加された属性で、プレースホルダを指定するために使用します。ここに指定した値は、対応ブラウザでは入力コントロールの初期値として表示されますが、フォーカスがされると消えて、ユーザーが入力可能になります。

使い方は簡単。プレースホルダとして表示したい内容を placeholder 属性に指定するだけです。

<input type="search" name="site-search" placeholder="検索キーワードを入力" />

実際に placeholder 属性を使った例としては、この Blog のヘッダにある検索ボックスもそうです。IE 以外の placeholder 属性に対応済み主要ブラウザで表示すれば、動作しているのがわかると思いますので見てみてください。

ah-placeholder.js の導入

placeholder 属性に対応しているブラウザに対しては上記の通り、placeholder 属性をつけるだけで終わりなんですが、対応していないブラウザ向けに ah-placeholder.js を導入します。

ah-placeholder.js のいいところは、placeholder 属性に対応している環境の場合は処理を中断して placeholder 属性をそのまま使ってくれること。対応環境では余計な処理をしない設計です。一方で、placeholder 属性に対応していない環境に対しては JavaScript で同様の動作をエミュレートしてくれます。

ah-placeholder.js は jQuery のプラグインですので、jQuery とあわせてページに読み込みます。先に ah-placeholder.js をダウンロードして、任意の場所にアップしておきましょう。

<!-- ↓jQuery の読み込み↓ -->
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7");</script>
<!-- ↓ah-placeholder.js の読み込み↓ -->
<script src="jquery.ah-placeholder.js"></script>

上の例では jQuery を Google から読み込んでいます。

次に ah-placeholder.js を実行するための記述を下記のように。

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

「[placeholder]」 としてある部分はセレクタなので、使用する環境に合わせて変更しましょう。上記の例の場合は、「placeholder をもつ要素」 という指定の仕方をしています。これは後述する placeholderAttr オプションに placeholder を指定している関係上、そうするのが一番楽だから。

その下が ah-placeholder.js のオプション。

• placeholderColor ： [プレースホルダ テキストの文字色 （初期値 ： silver）]
• likeApple : [Mac っぽい挙動に （初期値 ： false）]

上記の 2つは初期値のままでも問題ないので特に書かなくても大丈夫。なお、likeApple オプションを 「true」 にすると、Mac 版 Safari のようにフォーカス時点ではプレースホルダが消えず、入力をはじめると消えるという挙動になります。

大事なのは placeholderAttr オプション。

• placeholderAttr ： [プレースホルダに使用する属性 （初期値 ： title）]

ここの値を 「placeholder」 にすることで、placeholder 属性の値を使用して ah-placeholder.js が動作し、さらに placeholder 属性に対応している環境では処理が自動的に中断されます。

上の記述をまとめると下記のようになります。

<!-- ↓jQuery の読み込み↓ -->
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7");</script>
<!-- ↓ah-placeholder.js の読み込み↓ -->
<script src="jquery.ah-placeholder.js"></script>
<!-- ↓ah-placeholder.js の実行↓ -->
<script>
$(function() {
  $('[placeholder]').ahPlaceholder({
    placeholderColor : 'silver',
    placeholderAttr : 'placeholder',
    likeApple : false
  });
});
</script>

未対応ブラウザで確認して動作していれば完成です。