如题。
近日在开发的过程中遇到一个问题,还是IE的兼容性问题,在webkit内核的浏览器中,我们可以设置placeholder来在form中的控件里添加提示性语言。但是在IE这个属性是不被支持的。
在网上逛了很久,找到了一个解决的方法,直接用js模拟:但是,这个方法在IE7下还是会失效。
//LET IE SUPPORT PLACEHOLDER ATTRIBUTE
//autofocus
$('[autofocus]:not(:focus)').eq(0).focus();
//placeholder
var input = document.createElement("input");
if(('placeholder' in input)==false) {
$('[placeholder]').focus(function() {
var i = $(this);
if(i.val() == i.attr('placeholder')) {
i.val('').removeClass('placeholder');
if(i.hasClass('password')) {
i.removeClass('password');
this.type='password';
}
}
}).blur(function() {
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder')) {
if(this.type=='password') {
i.addClass('password');
this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var i = $(this);
if(i.val() == i.attr('placeholder'))
i.val('');
})
});
}
参考张鑫旭大神的文章:http://126.am/Yv8nl0
有其解决placeholder兼容性的方法。但是这个方法在IE下会使得密码框(input type=password)placeholder变成几个圆点。原因就是他是使用input的value来模拟placeholder。当input是password的时候,模拟出来的效果当然就是圆点了。
http://www.oschina.net/code/snippet_206691_26471下面这个方法是比较靠谱的方法,据说兼容IE6/7/8/9.我在360下面测试是没有问题的。建议各位友友可以在xp下对IE6进行测试哈。
具体的实现思路是,在当前的input外面使用一个等同于input的outerHeight的div来包住,同时使用一个span的position为absolute来放在input上方。这个方法的好处就是兼容性非常好,而且对于真正兼容placeholder的浏览器会自动调用原placeholder方法。然后对于不支持的才实行这个降级操作。使用时注意,由于该方法是直接获取input的outerHeight来设置div的高度,所以,最好input不要有任何的margin padding border等属性,否则,会使得absolute设置的span无法对准整个input框的中央。
/*
* jQuery placeholder, fix for IE6,7,8,9
* @author JENA
* @since 20131115.1504
* @website ishere.cn
*/
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:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).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();
});