IE9及IE9以下浏览器不支持placeholder属性,对IE9的placeholder兼容性处理方法通常是把placeholder的属性值放在value属性中,但这样不利于判断值是否为空,兼容性比较好一个方法是用一个元素覆盖在输入框上面代替placeholder,点击时再隐藏。
HTML代码
<div class="input"> <label class="placeholder" for="inpName"><i class="rq">Name</i></label> <input type="text" id="inpName" class="inpText text" value="" placeholder="输入邮箱地址"/> </div>
CSS代码
.input{position:relative;overflow:hidden;}
.inpText{display:block;}
.placeholder{cursor:text;display:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;color:#999;font-size:16px;line-height:30px;}
.placeholder i{position:relative;font-style:normal;display:block;}
.placeholder .rq:after{content:'*';color:#c40009;display:inline-block;margin-left:5px;}
jquery代码
function isSupportPlaceholder() {
var input = document.createElement('input');
return 'placeholder' in input;
}
$(function(){
if(!isSupportPlaceholder()){
var inpText = $('.inpText');
inpText.each(function(){
if($(this).val() == ''){
$(this).siblings('.placeholder').show();
}
});
inpText.focus(function(){
$(this).siblings('.placeholder').hide();
}).blur(function(){
if($(this).val() == ''){
$(this).siblings('.placeholder').show();
}
});
}
}); 