小程序输入框完成切换到下个输入框

深渊的那支花.

已于 2022-10-26 16:18:40 修改

阅读量2.5k

点赞数

分类专栏：小程序文章标签：小程序 javascript 前端

于 2021-10-18 12:14:01 首次发布

本文链接：https://blog.csdn.net/qq_44854653/article/details/120369203

版权

小程序专栏收录该内容

9 篇文章

订阅专栏

该博客介绍了如何在微信小程序中实现多个输入框之间的焦点切换。通过监听input的bindconfirm事件，在用户输入完成时判断是否还有后续输入框，并设置相应的focus属性来控制焦点移动。同时，使用data-index绑定每个输入框的索引，以便在事件处理中准确地切换到下一个输入框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序输入框完成切换到下个输入框

需求：页面有多个输入框，一个输完点击回车，切换到下个输入框

思路：利用小程序输入框的focus（获取焦点）属性，在bindconfirm事件（点击完成后触发）里设置变量，来控制输入框聚焦位置。

1、wxml

<input data-index="{{index}}"  bindinput="inputListener" 
bindconfirm="confirmListener"  focus="{{focus && focusIndex == index}}"

2、js

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