IE10以下placeholder不兼容

 做页面的时候在谷歌中是显示的，但是换了IE之后总是不显示，一个文本框还好，如果有多个的话，如图：

添加以下一段Jquery代码：

<script>
var JPlaceHolder = {
//检测
_check : function(){
return 'placeholder' in document.createElement('input');
},
//初始化
init : function(){
if(!this._check()){
this.fix();
}
},
//修复
fix : function(){
jQuery(':input[placeholder]').each(function(index, element) {
var self = $(this), txt = self.attr('placeholder');
self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:'38px', lineHeight:'38px', paddingLeft:paddingleft, color:'#666',fontSize:'14px'}).appendTo(self.parent());
self.focusin(function(e) {
holder.hide();
}).focusout(function(e) {
if(!self.val()){
holder.show();
}
});
holder.click(function(e) {
holder.hide();
self.focus();
});
});
}
};
//执行
jQuery(function(){
JPlaceHolder.init();
});
</script>

会发现效果大大不同。。

网上查找还发现另一种方法，可以用一个背景图片代替，个人觉得不是太好。。另外，写代码的时候记得添加Jquery文件，以及在IE中测试。。

 

转载于:https://www.cnblogs.com/zlx7/p/4786771.html