IEでもplaceholder属性をvalue値に変換して表示

harada 412views 更新:2014年3月10日
<input type="text" placeholder="テキストを入力してください" size="30" id="s">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>

if(ie() <= 9) {
  var searchText = $("#s").attr("placeholder");
  $("#s").val(searchText);
  $("#s").css("color", "#999");
  $("#s").focus(function() {
    if($(this).val() == searchText) {
      $(this).val("");
      $(this).css("color", "#000");
    }
  }).blur(function() {
    if($(this).val() == "") {
      $(this).val(searchText);
      $("#s").css("color", "#999");
    }
  });
}
function ie() {
  var undef, v = 3, div = document.createElement('div');
  while (
    div.innerHTML = '<!--[if gt IE '+(++v)+']><i></i><![endif]-->',
    div.getElementsByTagName('i')[0]
  );
  return v> 4 ? v : undef;
}
</script>

参考:IE9以下でもJSでplaceholder属性をvalue値にしてプレースホルダーを実現 – JSFiddle

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません