web creators特別号

いますぐ悩みが解決する！ Webデザイン仕事で役立つ54のアイデア

インタラクション＆エフェクト 3-13
HTML5のPlaceholderをIEでも利用可能に

HTML5から標準機能として追加された「placeholder」だがIEなど一部ブラウザでは非対応となっている。この問題を解決するためjQuery pluginである「ah-placeholder.js」の使い方を紹介する。

制作・文／国吉亜祈（ビヨンド・パースペクティブ・ソリューションズ株式会社）

BROWSER IE…6over

01

【1-1】のように検索窓などで見かける薄い文字は一般的に「placeholder（プレースホルダ―）」と呼ばれている。何を入力するべきか」をひと目で伝えることができるため、ユーザビリティ向上にも一役買ってくれる。

「placeholder」はHTML5から標準機能として追加されているが、IEなど一部ブラウザでは非対応となっている【1-2】。そこでここでは、未対応のブラウザでも「placeholder」を利用可能にしてくれるJavaScriptの「ah-placeholder.js」について紹介しよう。


【1-1】おそらく、一番目にするであろう「placeholder」の代表例はGoogleの検索窓。ブラウザによっては、グレー文字の部分は表示されない。


【1-2】placeholderのブラウザ対応状況（http://www.findmebyip.com/litmus/）。
ご覧の通り、IE はどのバージョンでも未対応となっている。

02

「ah-placeholder.js」が持つ最大の利点は、HTML5に対応しているブラウザの場合はスクリプトによる処理を行わず、IE6-9などの対応していないブラウザのみ有効になるという点だ。またHTML5の標準的な記述とほぼ同じ内容でマークアップをすればよいので、ソースコードを複雑にすることなく利用できるのも嬉しい。

ではさっそく【2-1】から「ahplaceholder.js」をダウンロードしよう。


【2-1】ZIPボタンをクリックしてダウンロードする（https://github.com/ahomu/jquery.ah-placeholder）

03

続いてah-placeholder.jsを読み込む記述を行う。jQuery本体も必要なのでダウンロードして読み込んでおこう【3-1】。さらにhead内に【3-2】の記述を行う。


【3-1】ah-placeholder.js を読み込む。


【3-2】head内の記述。

04

次にplaceholderで表示される文字の色やテキストを変えてみよう。

【3-2】のコードに記述されている「placeholderColor:'silver'」の'silver'の部分を変えることで好きな色に変更することができる【4-1】。

また、「placeholderAttr」をtitleとするとtitle属性がplaceholederのテキストとして表示される。テキスト内容を変更する場合はここに記述しよう【4-2】。

なおplaceholderAttrの属性がplace holdereの場合、likeAppleの処理は無効になる。

つまり、titleではなくplaceholederとすると対応しているモダンブラウザではJavaScript の処理を行わず、非対応のIEのみ処理を行うようになる。

なお、この場合の記述は【4-3】【4-4】のようになる。


【4-1】'red'に変更した場合の表示。


【4-2】placeholderAttr をtiitle 属性に設定する場合。class属性とtitle属性をセットであつかう。


【4-3】placeholderAttrをplaceholder属性に設定する場合。


【4-4】class属性をつけなくてもplaceholder属性すべてに対して機能させることができる。

05

続いてplaceholderで表示されているテキストを、どのタイミングで消すかの設定を行う。

これは【3-1】にある「likeApple」をtrueまたはfalseに指定することでテキストを消すタイミングを設定できる。

falseの場合はinputタグに対してフォーカス（クリック）した時点でplaceholderのテキストが消える【5-1】。

trueの場合はinputタグに対して文字を入力した時点でplaceholderのテキストが消える【5-2】。

メールアドレスなど特定の書式で入力してもらう必要がある場合は、注意喚起のためにフォーカス後もテキストを表示するほうがいいだろう。

だが、たとえば検索窓に使用する場合などは、いつまでも「キーワードを入力してください」などと表示されていると、少ししつこく感じられるかもしれない。

このあたりは、何を入力してもらうかによって使い分けるといいだろう。

ただし、このようにガイドとなるテキストが消えるタイミングを設定しても、思うように動かない場合もある。


【5-1】falseの場合は検索窓をクリックした時点でテキストが消える。


【5-2】trueの場合は検索窓をクリックした時点ではテキストは消えない。

06

05でテキストの消えるタイミングについて設定したが、実はplaceholederはブラウザによりテキストの消えるタイミングが異なる。

もちろん、HTML5のみで設定した場合とJavaScriptを使用した場合とで、その結果も異なる。

【6-1】に、「ah-placeholder.js」を使用し、かつlikeApple：trueの場合のタイミングについて調査した結果をまとめておく。あくまでも独自調査ではあるが、ぜひ参考にしていただきたい。


【6-1】HTML5で「ah-placeholder.js」を使用した場合の例。
○の場合はテキストを入力し始めた時点で、×はクリックして時点でplacehoderのテキストが消える。

07

HTML5ではplaceholder属性が、<input>と<textarea>に対して追加されることになった。これにより対応しているブラウザであれば、会員申し込みの入力フォームなどもJavaScriptを使わずに実装することが可能になった【7-1】。

placeholderは、スマートフォンなどユーザビリティが求められる環境では、重宝されることだろう【7-1】。

対応ブラウザはもちろんのこと、IEなどの未対応ブラウザも、今回紹介した「ahplaceholder.js」を利用すれば実装可能となるので、積極的に利用してもらいたい（なお、「ah-placeholder.js」では、IEの場合type="password"には使用不可となっているので注意）。

ただし「placeholder」は、あくまでも入力作業を行う際の補助的機能である。仮に「placeholder」が表示されなくても、ユーザーにとって困らないページ作りを心がけるべきだろう。


【7-1】筆者が関わっているMANGA REBORNのサイトでも、会員登録ページでplaceholderを使用している。


【7-2】iPhone5での表示例。


[目次に戻る]

 

【本記事について】
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。


※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。