input输入框输完最大长度怎么自动跳到下个input输入框
发布于 6 年前 作者 nxiang 498 次浏览 来自 问答

这种，求解，怎么自动跳到下个input

3 回复

<view>
 
  <view class="bind-content">
 
    <block wx:for="{{ inputLength }}" wx:key="index">
 
      <input class="bind-box__item"  type="number" value="{{ inputVal.length >= index + 1 ? inputVal[index] : '' }}" disabled catchtap="getFocus"></input>
 
    </block>
 
  </view>
 
  <input name="password" type="number" class="bind-box__cnt" maxlength="{{ inputLength }}" focus="{{ isFocus }}" bindinput="handleInput"></input>
 
</view>
.bind-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 70rpx;
  margin-left: 20px;
  margin-right: 20px;
}
 
.bind-box__item {
  width: 60rpx;
  height: 80rpx;
  font-size:24px;
  font-weight:bold;
  border-bottom: 4rpx solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
 
.bind-box__cnt {
  width: 0;
  height: 0;
}
  data: {
    inputLength: 6,
    isFocus: true,
    inputVal: ''
  },
  handleInput(e) {
    let that = this, val = e.detail.value;
    that.setData({
      inputVal: val,
    })

    if (val.length === 6) {

     console.log('输入完成')

    }
  },
  getFocus() {
    var that = this;
    that.setData({
      isFocus: true,
    })
  }

不需要6个input，只需要一个正常输入的input，然后通过输入的长度，逐个重新渲染在其他view上就可以了。输入和展示分开的逻辑

改设计，这种设计差不多就是为设计而设计

bindinput 里 设置下一个框框的 focus

回到顶部