收藏
回答

小程序如何实现input输入最大数后自动切换至下一个input

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 input 客户端 6.7.3 2.4.1

- 需求的场景描述(希望解决的问题)

小程序input设置最大输入值为1 ,输入1位数字之后如何让光标自动切换至下一个文本框?


回答关注问题邀请回答
收藏

8 个回答

  • 禾店短剧系统
    禾店短剧系统
    2021-05-28

    JS里声明2个变量: 是否获得焦点,需要焦点的序号。wxml中给input设置id,设置focus属性由以上2个变量来控制。在JS的输入完成监听事件里获取下一个input的序号,设置以上2个变量即可。

    2021-05-28
    有用 1
    回复
  • Hey Kong
    Hey Kong
    2020-02-26

    看看这个能不能帮到你。

    在线预览 https://qaqxiyangyang.github.io/autoFocusInput/dist/

    GitHub https://github.com/QAQXiYangYang/autoFocusInput

    2020-02-26
    有用 1
    回复 1
  • 2021-06-11

    我是这样处理的。可以参考一下

    wxml:

      <view class="input-row">
        <input wx:for="{{inputList}}" bindinput="_handleInput" data-index="{{index}}" class="input-num" type="number"
          focus="{{item.focus}}" value="{{item.value}}" maxlength="1" />
      </view>
    


    js:

    // 输入控制

       data: {
        inputList: [{
                    value: "",
                    focus: true,
                  },
                  {
                    value: "",
                    focus: false,
                  },
                  {
                    value: "",
                    focus: false,
                  },
                  {
                    value: "",
                    focus: false,
                  },
                ]
      }, 
       _handleInput(e) {
          const {
            inputList
          } = this.data
          const {
            value
          } = e.detail
          const {
            index
          } = e.currentTarget.dataset
          if (value.length === 1) {
            const nextIndex = index + 1
            inputList.forEach((item, innerIndex) => {
              item.focus = nextIndex === innerIndex
            })
            this.setData({
              inputList
            })
          }
          inputList[index].value = value
          this.setData({
            inputList
          })
        }
    
    2021-06-11
    有用
    回复
  • 小彭~
    小彭~
    2021-03-08

    有完整的吗

    2021-03-08
    有用
    回复
  • 苏
    2019-09-04

    你好,怎么做的能否发一下,

    2019-09-04
    有用
    回复
  • 2019-01-02

    原生这样做会有问题

    2019-01-02
    有用
    回复 2
    • 2019-01-02

      会存在什么问题呀

      2019-01-02
      回复
    • 2019-01-02回复

      你要删除之后 光标的位置会出现问题

      2019-01-02
      回复
  • 2019-01-02

    你需要准备给所有输入框一个focus属性(控制焦点失去和获取),以及input输入监听。这些数据可以用数组存取。 类似: [{value: "",focus: true},{value: "",focus: false},{value: "",focus: false},... ] 当第一个input执行,判断value.length为1时,就设置当前输入框的focus为false,下一个输入框focus为true。大致思路上是这样。

    2019-01-02
    有用
    回复 7
    • 2019-01-02

      多谢  我试试

      2019-01-02
      回复
    • 化身孤岛的我们
      化身孤岛的我们
      2019-01-23回复

      楼主,请问这个问题结局了吗?我尝试用focus聚焦来控制 但是键盘就会出现闪现的状况

      2019-01-23
      回复
    • 口头减肥
      口头减肥
      2020-03-13回复化身孤岛的我们
      我也遇到这个问题了,请问解决了吗
      2020-03-13
      回复
    • Tammy
      Tammy
      2020-04-09回复化身孤岛的我们
      请问这个问题解决了吗?我也遇到了
      2020-04-09
      回复
    • Qīngchēn
      Qīngchēn
      2023-04-13回复化身孤岛的我们
      请问这个问题解决了吗?我也遇到了
      2023-04-13
      回复
    查看更多(2)
  • 夏洛埃克
    夏洛埃克
    2019-01-02

    设置input的focus属性

    2019-01-02
    有用
    回复 4
    • 2019-01-02

      多谢  我试试

      2019-01-02
      回复
    • ※ Alfred ※※※
      ※ Alfred ※※※
      2019-12-16回复
      用这种方式没有出现切换时键盘先隐藏再展示的问题吗
      2019-12-16
      回复
    • hcccc💥
      hcccc💥
      2020-02-28回复※ Alfred ※※※
      请问 闪烁的问题解决了吗 我也是这样
      2020-02-28
      回复
    • Qīngchēn
      Qīngchēn
      2023-04-13回复※ Alfred ※※※
      我也遇到这个问题了,请问解决了吗
      2023-04-13
      回复
登录 后发表内容