先展示效果:
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<style type="text/css" >
*{margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
*{tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:rgba(0,0,0,0);}
.password{
80%;
height:40px;
margin: 50px auto;
position: relative;
text-align: center;
overflow: hidden;
}
.password .password_bg{
position: absolute;
left: 0;
top: 0;
100%;
height: 100%;
overflow: hidden;
}
.password .password_bg span{
float: left;
margin-right: 3%;
14%;
height: 100%;
line-height: 40px;
height: 40px;
font-size: 100px;
background-color: #f1f1f1;
}
.password .password_bg span:last-child{margin: 0;}
.password input{
position: absolute;
left: -100%;
top: 0;
-webkit-appearance: none;
appearance: none;
200%;
height: 100%;
opacity: 0;
}
p{text-align: center;}
</style>
</head>
<body>
<div class="password">
<div class="password_bg" id="showPasswd">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<input type="tel" id="passwd" maxlength="6">
</div>
<p>提交</p>
</body>
</html>
<script>
var aSpan = QueryAll("#showPasswd span");
Query("#passwd").addEventListener("input",function(){
var len = this.value.length;
for (var i = 0; i< aSpan.length; i++){
if(len > 0){
aSpan[i].innerHTML = "·";
len--;
}else{
aSpan[i].innerHTML = "";;
}
};
},false);
Query("p").onclick = function (){
alert(Query("#passwd").value ) ;
}
function Query(e){return document.querySelector(e);}
function QueryAll(e){return document.querySelectorAll(e);}
</script>