IE 8 浏览器 placeholder 兼容性处理

@sakila1012 2019-05-29 02:04:45发表于 sakila1012/blog

写在前面

由于公司的产品需要兼容 IE8 浏览器,在做登陆时,发现一个问题,placeholder 在input = text 情况下,显示还算正常,但在 input = password 就变成了两个点,百度,gg很多,有的是通过lable 模拟,另外还有通过定位模拟,发现都不能很好地解决password 为点的问题。经过不断的尝试和参考别的产品在 IE 8 下兼容处理。我整理下,具体见下:

兼容处理

通过处理input focus时和 blur 时来控制文本的显示和隐藏。其中关键的时 input {background: none;}z-index
z-index 在父子元素中生效,需要在父级元素设置 position: relative

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-1.9.1.js"></script>
	<style type="text/css">
		body {
		    font-family: Arial, Helvetica, sans-serif;
		    font-size: 12px;
		    background: #fff;
		    z-index: 1;
		}
		input {background: none;}
		.box {
			height: 300px;
			width: 300px;
			background: #f2f2f2;
			margin: 0 auto;
			padding-top: 20px;
		}
		.child {
			position: relative;
			margin: 20px;
			z-index: 2;
			border: 1px solid #ccc;
		    height: 35px;
		    background: #fff;
		}
		.ds-input {
			border: none medium;
		    font-family: verdana;
		    ime-mode: disabled;
		    width: 243px;
		    height: 21px;
		    line-height: 21px;
		    color: #bebebe;
		    font-size: 14px;
		    position: absolute;
		    top: 0px;
		    left: 5px;
		    padding: 7px 0;
		    outline: none;
		}
		.tips {
			position: absolute;
		    z-index: -999;
		    top: 2px;
		    _top: 4px;
		    left: 5px;
		    color: #C3C3C3;
		    font-size: 14px;
		    line-height: 33px;
		    visibility: visible;
		    cursor: text;
		    padding-left: 4px;
		}
	</style>
	<script type="text/javascript">
		$(function(){
			$("input").focus(function(){
				var id = "#tip_"+this.id;
				$(id).hide();
			});
			$("input").blur(function(){
				var id = "#tip_"+this.id;
				if(this.value=="")
				{
					$(id).show();
				}
			});
		});

	</script>
</head>
<body>
	<div class="box">
		<div class="child">
			<input type="text" class="ds-input" id="username" autocomplete="off">
			<span class="tips" id="tip_username">手机号/邮箱</span>
		</div>
               <div class="child">
			<input type="password" class="ds-input" id="password" autocomplete="off">
			<span class="tips" id="tip_password">密码</span>
		</div>
	</div>
</body>
</html>

希望能够对大家有帮助。