引用js

<script src="http://zeptojs.com/zepto.min.js"></script>

css

.pwd-box{

width:310px;

padding-left: 1px;

position: relative;

border: 1px solid #9f9fa0;

border-radius: 3px;

over-flow:hidden

}

.pwd-box input[type="tel"]{

width: 99%;

height: 45px;

color: transparent;

position: absolute;

top: 0;

left: 0;

border: none;

font-size: 18px;

opacity: 0;

z-index: 1;

letter-spacing: 35px;

}

.fake-box input{

width: 44px;

height: 48px;

border: none;

border-right: 1px solid #e5e5e5;

text-align: center;

font-size: 30px;

}

.fake-box input:nth-last-child(1){

border:none;

}

html

<div class="pwd-box">

<input type="tel" maxlength="6" class="pwd-input" id="pwd-input">

<div class="fake-box">

<input type="text" readonly="">

<input type="text" readonly="">

<input type="text" readonly="">

<input type="text" readonly="">

<input type="text" readonly="">

<input type="text" readonly="">

</div>

</div>

js

var $input = $(".fake-box input");

$("#pwd-input").on("input", function() {

var pwd = $(this).val().trim();

for (var i = 0, len = pwd.length; i < len; i++) {

$input.eq("" + i + "").val(pwd[i]);

}

$input.each(function() {

var index = $(this).index();

if (index >= len) {

$(this).val("");

}

});

if (len == 6) {

//執行其他操作

}

});

很多人再找的6位框輸入密碼 類似於支付時候的輸入密碼框