IE8・9では、残念ながら placeholder がサポートされていません。
それでも、案件によっては placeholderを使用したい!という要望もちらほらあります。
今回は、JQueryを使用する「jquery-placeholder」を使用して、IE8・9でも placeholder を使用できるようにしたいと思います。
Demoはこちらです。
目次
1.全体のコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=EDGE" /> <title>jquery-placeholder</title> <script src="js/jquery-1.12.4.js"></script> <!--[if lt IE 10]> <script src="js/jquery.placeholder.min.js"></script> <![endif]--> <style type="text/css"> <!-- .cstm-placeholder { color: #aaa; } //--> </style> </head> <script type="text/javascript"> $(function(){ var version = window.navigator.appVersion.toLowerCase(); if( version.indexOf("msie 8.") != -1 || version.indexOf("msie 9.") != -1 ){ $('input, textarea').placeholder({customClass:'cstm-placeholder'}); } }); </script> <body> <p>郵便番号</p> <input type="text" value="" placeholder="XXX-XXXX" /> <p>住所</p> <textarea placeholder="住所を入力して下さい。"></textarea> </body> </html> |
2.コードの詳細
2−1.プラグインの読み込み
今回は「jquery-placeholder」を使用するため、以下の2つを読み込みます。
・「jquery-placeholder」本体
・JQuery
1 2 3 4 |
<script src="js/jquery-1.12.4.js"></script> <!--[if lt IE 10]> <script src="js/jquery.placeholder.min.js"></script> <![endif]--> |
「jquery-placeholder」はGitHubからダウンロードできます。
また、<!–[if lt IE 10]><![endif]–>で括られた箇所は、IEが10未満の場合に、「js/jquery.placeholder.min.js」を読み込むという意味合いになります。
2−2.placeholderの設定
設定は、javascriptで行います。
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(function(){ var version = window.navigator.appVersion.toLowerCase(); if( version.indexOf("msie 8.") != -1 || version.indexOf("msie 9.") != -1 ){ $('input, textarea').placeholder({customClass:'cstm-placeholder'}); } }); </script> |
「jquery-placeholder」はIEが 8 もしくは 9 の場合に使用するため、ブラウザのバージョンを取得し、IE8・9の判定を行なっています。
1 2 |
var version = window.navigator.appVersion.toLowerCase(); if( version.indexOf("msie 8.") != -1 || version.indexOf("msie 9.") != -1 ){ |
「jquery-placeholder」の設定は、こちらになります。
1 |
$('input, textarea').placeholder({customClass:'cstm-placeholder'}); |
この場合は、input と textarea に placeholder を設定しています。
また、customClass 属性を使用すると placeholder に使用する独自クラスも設定できます。
以上の簡単な設定で、IE8・9で placeholderが使用できます。