当前位置:龙哥网 > 网络技术 > 针对IE9不支持placeholder的兼容处理方法代码

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

longge5个月前 (12-17)网络技术79

IE9及IE9以下浏览器不支持placeholder属性,对IE9的placeholder兼容性处理方法通常是把placeholder的属性值放在value属性中,但这样不利于判断值是否为空,兼容性比较好一个方法是用一个元素覆盖在输入框上面代替placeholder,点击时再隐藏。

针对IE9不支持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();
			}
		});
	}
});
免责声明
本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。#转载请注明出处!