IE10がいうことを聞いてくれない件(プレースホルダ)
Placeholder not working in IE10
仕事でプレースホルダの設定した検索項目を作ったのだが、
IE10だと、一回表示されるとそれ以降表示されなくなるという現象が発生。
しかも今回、用途が異なる二つの検索窓が用意していたため、
このプレースホルダの表示が消えると同じ検索窓がなぜか二つ並んでいるという風に見えてしまう、という残念なことになることが発覚。
<body> <div class="search"> <form name="form" action="#"> <p> <input type="text" name="hoge" value="" placeholder="キーワード" id="keyword_id" /> <!-- ↑他ブラウザだとちゃんと見えるが、IEだと2回目以降消える --> <a href="" onclick="document.form.submit();">☆検索☆</a> </p> <p> <input type="text" name="foo" value="" placeholder="カテゴリ " id="categ_id" /> <a href="" onclick="document.form.submit();">☆検索☆</a> </p> </form> </div> </body>
これはどうするべか。
とググったところこんな記事が↓
http://stackoverflow.com/questions/19312069/placeholder-not-working-in-ie10
な、なるほど。
こうするしかないんか。
というわけでここの記事を見ながら実装してみた。
<script type="text/javascript"> $(document).ready(function(){ if(navigator.appVersion.match(/MSIE [\d.]+/)){ var placeholderText_key = 'キーワード'; $('#keyword_id').val(placeholderText_key); $('#keyword_id').blur(function(){ $(this).val() == '' ? $(this).val(placeholderText_key) : false; }); $('#keyword_id').focus(function(){ $(this).val() == placeholderText_key ? $(this).val('') : false; }); var placeholderText_categ = 'カテゴリ'; $('#categ_id').val(placeholderText_categ ); $('#categ_id').blur(function(){ $(this).val() == '' ? $(this).val(placeholderText_categ ) : false; }); $('#categ_id').focus(function(){ $(this).val() == placeholderText_categ ? $(this).val('') : false; }); $('#keyword_id').attr('placeholder', 'キーワード'); $('#categ_id').attr('placeholder', 'カテゴリ'); } }); </script>
確かにこれでプレースホルダは見えるようになった。
が、しかし試しに検索ボタンをぽちったところ、このプレースホルダ用にセットした値で検索していることが発覚。
ああ、テキストでセットしてるからか…。
よって検索する直前にプレースホルダ(というかこのvalue)をデフォ値だったらブランクにするという手段で回避することにした。
<script type="text/javascript"> function checkForIE(){ if(navigator.appVersion.match(/MSIE [\d.]+/)){ keyword=document.getElementById("keyword_id").value; categ =document.getElementById("categ_id").value; if(keyword == "キーワード"){ document.getElementById("keyword_id").value=""; } if(categ == "カテゴリ"){ document.getElementById("categ_id").value=""; } } } </script>
とりあえず動いたけど、なんかいまいち。。