微信小程序6位或多位验证码密码输入框功能的实现代码

<form bindsubmit="formSubmit"> 
 <view class='content'> 
 <block wx:for="{{Length}}" wx:key="item"> 
 <input class='iptbox' value="{{Value.length>=index+1?Value[index]:''}}" disabled password='{{ispassword}}' catchtap='Tap'></input> 
 </block> 
 </view> 
 <input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"></input> 
 <view> 
 <button class="btn-area" formType="submit">Submit</button> 
 </view> 
</form> 

Page({ 
 /** 
 * 页面的初始数据 
 */ 
 data: { 
 Length:6, //输入框个数 
 isFocus:true, //聚焦 
 Value:"", //输入的内容 
 ispassword:true, //是否密文显示 true为密文， false为明文。 
 }, 
 Focus(e){ 
 var that = this; 
 console.log(e.detail.value); 
 var inputValue = e.detail.value; 
 that.setData({ 
 Value:inputValue, 
 }) 
 }, 
 Tap(){ 
 var that = this; 
 that.setData({ 
 isFocus:true, 
 }) 
 }, 
 formSubmit(e){ 
 console.log(e.detail.value.password); 
 }, 
}) 

content{ 
 display: flex; 
 justify-content: space-around; 
 align-items: center; 
 margin-top: 200rpx; 
} 
iptbox{ 
 width: 80rpx; 
 height: 80rpx; 
 border:1rpx solid #ddd; 
 border-radius: 20rpx; 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 text-align: center; 
} 
ipt{ 
 width: 0; 
 height: 0; 
} 
btn-area{ 
 width: 80%; 
 background-color: orange; 
 color:white; 
}