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

最近リリースされたInternet Explorer 10はplaceholder属性対応になった。 これにより簡単にプレースホルダーを実現することができるようになったのだがIE9以下はplaceholder属性非対応のままなのでJSでこのようにplaceholder属性をvalue値に入れてプレースホルダーのように振る舞う用にする必要がある。 ※このやり方だとplaceholderの代わりに入れたvalueを送信してしまうおそれがあるのでそちらの対策も別途必要。

HTML

<input type="text" placeholder="テキストを入力してください" size="30" id="s">

JavaScript

//IE9以下の場合はplaceholderの値をvalueに変換
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");
    }
  });
}

//IE使用バージョン取得
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;
}