html5下input的placeholder标签兼容ie9

最新推荐文章于 2019-09-13 17:25:00 发布

转载最新推荐文章于 2019-09-13 17:25:00 发布 · 896 阅读

本文介绍了一种针对Internet Explorer浏览器的占位符兼容解决方案，通过jQuery实现输入框placeholder特性的模拟，确保了在不支持此特性的旧版IE中也能正常显示提示文字，并附带了必要的CSS样式。

if (!!window.ActiveXObject || "ActiveXObject" in window) { //判断在ie下执行

$(function(){
jQuery('[placeholder]').focus(function() {
var input = jQuery(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = jQuery(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
jQuery(this).find('[placeholder]').each(function() {
var input = jQuery(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});

})

}

css文件里需要增加 .placeholder{color:#a9a9a9;}