评论

多个input输入完成自动切换到下一个输入框

输入框自动切换

  • 需求:
    一个input输入完回车,切换到下一个input。
  • 思路:
    JS里声明2个变量: focus是否获得焦点,focusIndex需要焦点的序号。wxml中给input设置id,设置focus属性由这两个变量来控制。在JS的输入完成监听事件里获取下一个input的id序号并修改变量。

js:

Page({
  /**
   * 页面的初始数据
   */
  data: {
    ...
    // 是否获取焦点
    focus: false,
    // 需要获取焦点的序号
    focusIndex: 0
  },
  // 输入完成事件
  confirmListener (event) {
    let currentIndex = event.currentTarget.dataset.categoryIndex
    if (currentIndex < input的数量 - 1) {
      this.setData({
        focus: true,
        focusIndex: currentIndex + 1
      })
    }else {
      this.setData({
        focus: false
      })
    }
  },
  // 输入时事件
  inputListener(event) {
    ...
    let currentIndex = event.currentTarget.dataset.categoryIndex
    if (this.focusIndex != currentIndex) {
      this.setData({
        focusIndex: currentIndex
      })
    }
  },
})

wxml:

<input id="input{{index}}" data-category-index="{{index}}"  
bindinput="inputListener" bindconfirm="confirmListener"  
focus="{{focus && focusIndex == index}}"
最后一次编辑于  2021-10-28  
点赞 1
收藏
评论

3 个评论

  • healer
    healer
    2021-12-19

    但是会有一个问题切换下一个的时候键盘就会突然间收起,并且聚焦效果也没有了

    2021-12-19
    赞同 2
    回复 4
    • 清蒸鱼
      清蒸鱼
      2021-12-24
      你的是什么系统啊,我只测了iOS当时没出现这个问题。
      2021-12-24
      回复
    • LZQ
      LZQ
      2022-02-25
      +1同样出现这个问题,多个input时,切换focusIndex时一瞬间收起键盘了,得联系官方修复一下
      2022-02-25
      2
      回复
    • 54青年人
      54青年人
      2023-03-23
      我两个type都是默认text的,输完一个input直接点下一个input输入,焦点没了,软键盘还在,输入完成输入框不会显示。
      2023-03-23
      回复
    • 清蒸鱼
      清蒸鱼
      2023-06-12回复54青年人
      你后来解决了吗
      2023-06-12
      回复
  • 勇哥
    勇哥
    发表于移动端
    2022-04-09
    :ⅰlego
    2022-04-09
    赞同
    回复
  • 587!
    587!
    2021-11-12

    感谢分享

    在写表单时非常有用

    2021-11-12
    赞同
    回复 1
    • 清蒸鱼
      清蒸鱼
      2021-11-15
      不客气,不妨点个赞~
      2021-11-15
      回复
登录 后发表内容