placeholderとは

placeholderとはweb上の入力フォームで、入力文字のヒントを予め表示しておき、 ユーザに入力値のヒントを与えるものです。 html5では標準となっており、以下のように記述します。  

  こうすると、実際の表示ではグレーで表示されます  

IE対応

Internet Explorer（以下IE）では9になってもなおhtml5には 完全には対応されておらず、placeholderも対応していません。 ですので、placeholderを使わずにJavaScriptを使いほぼ同じの動作を実現することも可能ですが、 せっかくhtml5で新しく用意された属性を使わないのは残念ですよね。 そこで今回はjQueryのプラグイン「jquery.ah-placeholder」を使用します。 これを使うとIEでもplaceholderが有効になります。    

jquery.ah-placeholderの使い方

head内に「jquery」と「jquery.ah-placeholder」を読み込みます。 更に以下のように記述します。

placeholderColor → placeholderとして表示される文言の色 placeholderAttr → placeholderとして表示させる属性を指定します。例えば「title」と入力すると「title」の値がplaceholderとして表示されます。 likeApple → placehoderとして表示された文字をどのタイミングで消すかを指定できます。「true」にすると文字を入力した瞬間に、「false」にするとフォーカスした時点で、それぞれ削除されます。    

IE9の対応

jquery.ah-placeholderを導入するとIE6～IE8は問題なく動作するのですが、 IE9では未入力でフォームを送信しようとすると、placeholderの値がそのまま送られてしまうというバグがあります。 そこで、以下のJavaScriptを追加で記述します。

これでクロスブラウザ対応が完了です！