IE8・IE9でplaceholderを表示する

IE8・9では、残念ながら placeholder がサポートされていません。

それでも、案件によっては placeholderを使用したい!という要望もちらほらあります。

今回は、JQueryを使用する「jquery-placeholder」を使用して、IE8・9でも placeholder を使用できるようにしたいと思います。

Demoはこちらです。

全体のコード

コードの詳細

1.プラグインの読み込み

今回は「jquery-placeholder」を使用するため、以下の2つを読み込みます。

・「jquery-placeholder」本体

・JQuery

「jquery-placeholder」はGitHubからダウンロードできます。

また、<!–[if lt IE 10]><![endif]–>で括られた箇所は、IEが10未満の場合に、「js/jquery.placeholder.min.js」を読み込むという意味合いになります。

2.placeholderの設定

設定は、javascriptで行います。

「jquery-placeholder」はIEが 8 もしくは 9 の場合に使用するため、ブラウザのバージョンを取得し、IE8・9の判定を行なっています。

「jquery-placeholder」の設定は、こちらになります。

この場合は、input と textarea に placeholder を設定しています。

また、customClass 属性を使用すると placeholder に使用する独自クラスも設定できます。

以上の簡単な設定で、IE8・9で placeholderが使用できます。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする