在 uni-app 开发中，我们经常需要在表单中自动控制光标的聚焦顺序。下面介绍一种通过定义一个 focus 数组来动态控制多个输入框焦点的方法。

示例代码

首先，我们在组件的 data 中定义一个 focus 数组，用来标记每个输入框是否获得焦点。假设我们有三个输入框，对应的 focus 数组初始状态如下：

<template>
  <view class="container">
    <!-- 第一个输入框 -->
    <input type="text" v-model="firstValue" :focus="focusArr[0]" @confirm="moveFocus(1)" placeholder="请输入第一个值" />
    <!-- 第二个输入框 -->
    <input type="text" v-model="secondValue" :focus="focusArr[1]" @confirm="moveFocus(2)" placeholder="请输入第二个值" />
    <!-- 第三个输入框 -->
    <input type="text" v-model="thirdValue" :focus="focusArr[2]" placeholder="请输入第三个值" />
  </view>
</template>

在 JavaScript 部分，我们初始化数据和定义一个 moveFocus 方法，用来更新 focus 数组，使得指定输入框获取焦点：

export default {
  data() {
    return {
      firstValue: "",
      secondValue: "",
      thirdValue: "",
      // 定义一个 focus 数组，每个元素对应一个输入框是否获得焦点
      focusArr: [true, false, false]
    };
  },
  methods: {
    /**
     * 移动焦点到指定输入框
     * @param {number} index - 要聚焦的输入框索引
     */
    moveFocus(index) {
      // 将所有输入框的焦点状态置为 false
      this.focusArr = this.focusArr.map(() => false);
      // 使用 $nextTick 确保 DOM 更新后再设置目标输入框获得焦点
      this.$nextTick(() => {
        // 使用 Vue 的 $set 方法更新数组中的指定项
        this.$set(this.focusArr, index, true);
      });
    }
  }
};

当然,不只能在输入框的confirm事件中调用,你可以任何你想要的地方调用.

比如,当按下回车后调用方法,这时会校验数据是否正确,如果正确可以直接写"this.moveFocus(你的focusArr数组下表)"去直接让光标跳转到该输入框提示用户填写.反正我的场景是,PDA快速扫描.

原理解析

1. focus 数组
   我们通过 focusArr 数组来控制每个输入框的焦点。每个输入框的 :focus 属性绑定数组中相应的布尔值。当某个位置为 true 时，该输入框就会获得焦点。

2. 清空焦点
   当需要切换焦点时，首先使用 map() 方法将 focusArr 中所有的值设为 false，确保所有输入框失去焦点。

3. 异步更新
   由于 Vue 的数据更新是异步的，直接修改 focusArr 后可能不会立即更新 DOM。我们使用 $nextTick() 方法确保在下一个 DOM 更新周期后，再调用 $set() 将指定位置的值设置为 true。这样可以确保目标输入框能够获得焦点。

应用场景

• 多步骤表单
  在多步骤表单中，当用户按下回车或者点击“下一步”时，可以自动将光标移到下一个输入框，提高用户体验。

• 数据校验后自动跳转
  当用户输入完成后，如果数据验证通过，可以自动将光标移动到下一个需要填写的数据项。

• 动态表单
  在一些动态表单中，输入框数量或排列顺序可能发生变化，通过 focus 数组的方式可以灵活控制焦点，无需依赖固定的 ref 或 DOM 查询.