HTML5のplaceholder属性をInternet Explorerで使う

2012/05/01

HTML

HTML5の特長の一つとして、フォームの機能が拡張されている点があげられますが、Opera以外でのブラウザの実装はそれほど進んでいるとはいえません。ですが、フォームの属性に関していえば、各ブラウザごとで対応されてきていますので、是非使いたいところです。
ここで問題になってくるのが、やっぱりInternet Explorer。属性どころか、要素やタイプに関しても全滅状態なのです...。
そこで、｢Internet ExplorerでもHTML5の新しいフォームの属性を使ってみよう！｣ということで、HTML5で新しく追加された属性の一つ"placeholder"をInternet Explorerにも対応させる方法を紹介しようと思います。

Keyword：HTML5,placeholder,jQuery

HTML5で新しく追加されたフォームの属性

placeholder属性をInternet Explorerに対応させる前に、簡単にHTML5で新しく追加されたフォームの属性に関して触れておきます。

HTML5で新しく追加されたフォームの属性

Autocomplete･･･オートコンプリート機能のオン･オフの切り替え
※一度入力した値を記憶しておき、次回の入力時に候補として表示する機能。
Autofocus･･･フォームを開いた際、フォーカスする要素を指定
List･･･入力値の候補(datalist要素)のID指定
※よく入力する値を候補として指定し、選択可能にする。
Placeholder･･･入力値の例を指定
※今回は、こちらをInternet Explorerでも使用可能にします。
Min･･･入力値の下限指定
Max･･･入力値の上限指定
Multiple･･･複数選択指定(select要素のリストから0個以上選択可能にする)
Pattern･･･入力可能パターンの指定
Required･･･入力必須項目の指定
Step･･･入力値の刻み幅の指定
例1) input type=”number” step=”2″で偶数のみ入力
例2) input type=”time” step=”300″で300秒(5分)単位で時刻を入力

▼2012.5.1現在でのブラウザの対応状況

※画像をクリックすると拡大表示されます

HTML5のplaceholder属性をInternet Explorerにも対応させる

placeholder属性とは？
フォームのinput要素やtextarea要素にplaceholder属性を指定することで、入力欄が空白の際にplaceholder属性の値が表示され、何かを入力するとその値は表示されなくなります。よくある例としては、”placeholder属性で入力例を表示させておくことで、ユーザビリティを向上させる”といった使い方が多いですね。

▼検索フォームにplaceholder属性を指定した場合のイメージ

カーソルをフォーカスさせると、placeholder属性で指定した値が表示されなくなり、任意のワードを入力することができます(※1ブラウザによってフォーカス時はplaceholder属性で指定した値が表示されたままで、任意のワードを入力し始めると表示されなくなるものもあります)。

Internet Explorerでplaceholder属性を使うには、まず、jQueryプラグインとして公開されている”jquery.ah-placeholder.js”をダウンロードします。
⇒ jquery.ah-placeholder.js -GitHub-
※jquery.ah-placeholder.jsは、ハブろぐ運営者さん作成のjQueryプラグインです。

jquery.ah-placeholder.jsはjQueryプラグインですので、jQueryも必要です。
⇒ jQuery JavaScript Library

ダウンロードしたjquery.ah-placeholder.jsに以下を追記します。

jquery.ah-placeholder.js

// jquery.ah-placeholder.jsを実行
$(function() {
$('[placeholder]').ahPlaceholder({
    placeholderColor : 'silver',
    placeholderAttr  : 'placeholder',
    likeApple        : false
});
});

補足

●jquery.ah-placeholder.jsを実行
3行目はセレクタです。
デフォルトでは”.jq-placeholder”とclassで使用するようになっていますが、Ver1.2でplaceholderAttrオプションが追加され、placeholderAttrで”placeholder”を指定すると、placeholder属性に対応しているブラウザではスクリプト処理を行わず、Internet Explorerのようにplaceholder属性に対応していないブラウザのみスクリプト処理を行うようになっています。ですから、”[placeholder]”と指定します。
4行目でplaceholderのテキストカラーを指定します(※“silver”がデフォルト設定)。
5行目で属性を指定します。デフォルトの”title”から”placeholder”と指定します。
6行目は”false”を指定します。”ture”を指定すると※1の動作になります。

こちらの記述は、head内に書いても構いません。head内の記述が長くなるので、外部ファイルから読み込むようにしています。

htmlには以下を記述します。

html

<!--スクリプトの読み込み-->
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.ah-placeholder.js" type="text/javascript"></script>
</head>

<!--placeholder属性を指定-->
<input type="text" name="○○○○○" placeholder="○○○○○" />

補足

●スクリプトの読み込み
外部ファイルとして、jquery.jsとjquery.ah-placeholder.jsを読み込みます。

●placeholder属性を指定
placeholder属性に任意のテキストを入力します。

●placeholderのカラースタイルを適応
Firefox･Chrome･Safariといったplaceholderに対応したブラウザでは、jquery.ah-placeholder.jsでのスクリプト処理は実行されませんので、placeholderのカラースタイルは別途CSSで設定しないといけません。FirefoxとWebkit系のブラウザではスタイルを適応させる場合の記述が少し違います。

Firefox
input:-moz-placeholder {
color: silver;
}
※“input”を外すことで”textarea”にも適応可能です。

Webkit
input::-webkit-input-placeholder {
color: silver;
}
※“input”を外すことで”textarea”にも適応可能です。

これでInternet Explorerでもplaceholder属性を使えるようになります。
Internet Explorer7～9、Firefox12、Chrome18、Safari5.1では問題なく表示されているようです。実際の表示に関しては、当サイトの検索フォーム(※当サイトの右上に設置)に反映させてみましたので、各ブラウザでご確認ください。