写在前面
由于公司的产品需要兼容 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(){
console.log(111)
var id = "#tip_"+this.id;
$(id).hide();
});
$("input").blur(function(){
console.log(222)
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>
复制代码希望能够对大家有帮助。
转载于:https://juejin.im/post/5cedeea65188253382697a9f