收藏
回答

关于多个input长度限制为1,输入完自动跳转下一个input,删除跳回上一个input的问题?

使用focus可以做到输入跳转到下一个,删除时我使用的是bindinput带过来的内容如果为空则跳转到上一个input,可是,如果input为空,就不会触发bindinput就做不到删除上一个input的内容,本来想监听键盘的删除事件,但是经过查询,给出的方法是bindinput中带有keyCode,那么问题有回来了,input为空并不会触发,bindinput,自然也就拿不到keyCode依然还是无法监听到键盘事件.....这是我是想要实现的效果图:

wxml代码:     
 <view class="code">
        <input class="input_a" bindinput="inputListener" data-index="{{index}}" focus="{{focus && (focusIndex == index)}}" model:value="{{code[index]}}" placeholder="_" wx:for="{{code}}" wx:key="index" maxlength="1"/>
      </view>
js代码:
  data: {
    code:["","","","","","","","","","","","","","","","","","","","","","","","",],
    focus: true,
    focusIndex: 0,
  },
      // 输入时事件
  inputListener(v) {
    console.log("键盘",v.detail.keyCode)
    console.log("下标",v.currentTarget.dataset.index)
    console.log("内容",v.detail.value)
    let e = v.currentTarget.dataset.index
    let n = v.detail.value
    let index = "code[" + e + "]"
    this.setData({
      [index]:n
    }) 
    if (this.data.focusIndex != e)
    this.setData({
      focusIndex:e
    }) 
    if (e < 24) {
      if(n != ''){
        if(this.data.focusIndex == 23){
          this.setData({
            focus:true,
          }) 
        }else{
          this.setData({
            focus:true,
            focusIndex:e + 1
          }) 
        }
      }else{
          this.setData({
            focus:true,
            focusIndex:e - 1
          })
      }   
    }
  },
回答关注问题邀请回答
收藏

3 个回答

  • 王『小』贱*#
    王『小』贱*#
    2022-11-17

    你可以把他写成一个view,ontap事件就是让一个隐藏的input获取焦点。然后input的bindinput是赋值给value(value是一个变量名)。而你的view中的内容就是用来展示value就好了。看上去就像是多个input输入了

    2022-11-17
    有用
    回复
  • 澄c澄悦
    澄c澄悦
    2022-11-17

    首先,你用这么多input肯定是不行的,在手机上的体验非常不好!每次输完一个数字,键盘都会缩起再出现,抖动很厉害。我改造了下你的,改成只用一个input了,https://developers.weixin.qq.com/s/FEPOLPm87RD7

    2022-11-17
    有用
    回复
  • 拾柒
    拾柒
    2022-11-17

    不能在一个input里面实现么,每隔4位插空格

    2022-11-17
    有用
    回复
登录 后发表内容