移動web如何實現類似客戶端多方框輸入密碼功能

.pwd-box{ 
width:310px; 
padding-left: 1px; 
position: relative; 
border: 1px solid #9f9fa0; 
border-radius: 3px; 
} 
.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; 
} 
.pwd-box .pwd-input:focus{//密碼框聚焦的時候需要改變其位置，否則IOS上會有閃動的光標~ 
left:-1000px; 
top: -100px; 
} 

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) { 
 self.sendPackage(pwd);//發送密碼 
 } 
 });