IE8・IE9でplaceholderを表示する

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

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

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

Demoはこちらです。

１．全体のコード

<!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>

<!DOCTYPE html>

<head>

<title>jquery-placeholder</title>

<!--[if lt IE 10]>

<![endif]-->

<!--

.cstm-placeholder {

color: #aaa;

}

//-->

</style>

</head>

$(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>

</body>

</html>

２．コードの詳細

２−１．プラグインの読み込み

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

・「jquery-placeholder」本体

・JQuery

    <script src="js/jquery-1.12.4.js"></script>
<!--[if lt IE 10]>
    <script src="js/jquery.placeholder.min.js"></script>
<![endif]-->

<!--[if lt IE 10]>

<![endif]-->

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

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

２−２．placeholderの設定

設定は、javascriptで行います。

  <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>

$(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の判定を行なっています。

var version = window.navigator.appVersion.toLowerCase();
if( version.indexOf("msie 8.") != -1 || version.indexOf("msie 9.") != -1 ){

1 2	var version = window.navigator.appVersion.toLowerCase(); if( version.indexOf("msie 8.") != -1 \|\| version.indexOf("msie 9.") != -1 ){

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

$('input, textarea').placeholder({customClass:'cstm-placeholder'});

1	$('input, textarea').placeholder({customClass:'cstm-placeholder'});

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

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

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