IE10以下placeholder不兼容

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

IE10以下placeholder不兼容

添加以下一段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>

会发现效果大大不同。。

IE10以下placeholder不兼容

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

上一篇:Asp.Net_Session跟Cookie的记住登陆名


下一篇:centos下整合PagerDuty、nagios初探(on-call尝鲜和体验)