在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; 
    })
  }
});