input依次输入密码
原理：
一个真正的可以输入的input框，opacity： 0，设定位层级；（视图不可见的）
再来6（n）个input，readyonly,用来显示，type为password，设置好样式；（视图可见的）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>手机端六位密码输入</title>
<script src="http://zeptojs.com/zepto.min.js"></script>
<style>
* {
padding: 0px;
margin: 0px;
}
input {
border: none;
outline: none;
background: none;
}
#pwd-box {
width: 310px;
height: 48px;
position: relative;
border: 1px solid #9f9fa0;
border-radius: 3px;
overflow: hidden;
margin: 10px auto;
}
#pwd-box input[type="number"] {
width: 100%;
height: 100%;
color: transparent;
/*letter-spacing 属性增加或减少字符间的空白,字间距*/
letter-spacing: 35px;
position: absolute;
top: 0;
left: 0;
border: none;
font-size: 18px;
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
z-index: 1;
outline: none;
}
#pwd-box .fake-box {
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row;
-ms-flex-flow: row;
flex-flow: row;
}
#pwd-box .fake-box input {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
height: 100%;
border: none;
border-right: 1px solid #e5e5e5;
text-align: center;
font-size: 30px;
float: left;
}
#pwd-box .fake-box input:nth-last-child(1) {
border: none;
}
</style>
</head>
<body>
<div id="pwd-box">
<input type="number" maxlength="6" class="pwd-input" id="pwd-input" autofocus>
<div class="fake-box">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
</div>
</div>
<script>
$("#pwd-input").on("input", function() {
// trim(): 去两边空格的方法；
var pwd = $(this).val().trim();
var len = pwd.length;
for(var i = 0; i < len; i++) {
$(".fake-box input").eq(i).val(pwd[i]);
}
$(".fake-box input").each(function() {
var index = $(this).index();
if(index >= len) {
$(this).val("");
}
});
if(len == 6) {
//执行其他操作
setTimeout(function() {
alert('订单已提交')
}, 300)
}
if(len > 6) {
pwd = pwd.substr(0, 6);
$(this).val(pwd);
len = 6;
}
});
</script>
</body>
</html>
