jquery - 在 IE7 和 iE8 输入框中的任何位置单击时占位符文本不会消失

Question

我有一个 Fancy 输入框

<input id="search" type="text" placeholder="Enter your name" class="search" name="q"/>

.search {
    font-family: arial;
    height: 32px;
    width:100%;
    min-width:100px;
    font-size: 14px;
    background-image: url('/image/myimage.png');
    background-size: 100% 100%;
    background-repeat:no-repeat;    
}

它在除 IE8 或更低版本之外的所有其他浏览器中都可以正常工作，因此我不得不这样做来拉伸图像。

<!--[if lte IE 8]>              
    <style type="text/css">
        #search{
                 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image/myimage.png', sizingMethod='scale');
                -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image/myimage.png', sizingMethod='scale')";
        }
    </style>
<![endif]-->

现在我想在搜索框中添加一个占位符文本，所以我使用了Placeholder.js文件，因为 IE 7 和 8 不支持占位符。

现在的问题是，当我单击 IE 8 或 7 中的输入框时，输入框没有被选中。由于占位符文本没有消失。我相信 alphaimageloader 是问题，因为当我删除它时，占位符可以正常工作。有人可以给我建议吗？

Answer 1

尝试这个

现场演示

var placeHolderSupport = document.createElement('input').placeholder != undefined;

$(function() {
  if (!placeHolderSupport) {
    $search=$("#search");
    var ph = $("#search").attr("placeholder");
    if ($search.val()==="") {
      $search.val(ph);
      $search.prop("defaultValue",ph);
    }
    $search.on("focus",function() {
      if (this.value===this.defaultValue) this.value=""; 
    })
    .on("blur",function() {
      if (this.value==="") this.value=this.defaultValue; 
    })
  }
});