微信小程序之六位输入框功能点就是有一排输入框，从右往左输入内容，内容往左依次排序 //page.wxml //page.

功能点就是有一排输入框，从右往左输入内容，内容往左依次排序

//page.wxml

<form> 
  <view class='productQuizContent-number'> 
    <block wx:for="{{Length}}" wx:key="item"> 
      <input type="number" 
      value="{{Length-Value.length<=index?Value[(Value.length+index)-Length]:''}}" 
      disabled password='{{ispassword}}' catchtap='Tap'>
     </input> 
   </block> 
  </view> 
<input type="number" name="password" password="{{true}}" 
class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus">
</input> 
</form>

//page.wxss

 .iptbox{   width: 80rpx;   height: 80rpx;   border:1rpx solid grey;   border-radius: 20rpx;   display: flex;   justify-content: center;   align-items: center;   text-align: center;  }  .ipt{   width: 0;   height: 0;  } 
.productQuizContent-number {  width: 100%;  margin-top: 20rpx;  display: flex;  justify-content: space-between;}.productQuizContent-number>input {  width: 92rpx;  height: 118rpx;  background: #FFF1F1;  border-radius: 11rpx;  font-size: 54rpx;  font-family: DINAlternate-Bold, DINAlternate;  font-weight: bold;  color: #DD4239;  line-height: 63rpx;  text-align: center;}

//page.js

data: {    Length:5,    //输入框个数     isFocus:false,  //聚焦     Value:"",    //输入的内容     ispassword:false, //是否密文显示 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,     })    },