针对IE9不支持placeholder的兼容处理方法代码

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();
			}
		});
	}
});