占位符文本不消失就点击任何地方在IE7和IE8

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