Question

我有一个花式输入框

<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

试试这个

Live Demo

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

在IE7＆amp ;;输入框中的任何位置单击时，占位符文本不会消失IE8

1 个答案: