关于多个el-input的自动聚焦，每输入完一个el-input,自动聚焦到下一个

讲解原理或者思路：

如果你有多个el-input,想要实现每输入完一个输入框，然后自动聚焦到下一个输入框，同理，如果每删除一个输入框的值，自动聚焦到上一个输入框。

条件

那么首先要做的就是，设置条件，在什么时候自动聚焦到下一个呢？

比如监听输入内容，简单点儿，在输入完一个字符之后（或者说在监听到输入框有更新的时候）就自动聚焦到下一个，好，先看html结构

注意我使用的是vue3组合式API

html 复制代码

            <el-input
              v-for="(item, index) in 6"    //循环
              :key="index"                    //唯一标识
              v-model="code[index]"            //输入绑定
              maxlength="1"                    //我们说到的条件，识别条件，这个是重点
             @keyup.delete="handleDelete(index)" //这个是键盘监听事件，当我们使用删除键的话
              @input="handleInput(index)"       //这个是原生的input输入框监听事件
              placeholder=""
              autocomplete="off"
              :ref="el=>inputs[index] = el"   //这个是监听DOM元素
这是一个箭头函数，当Vue渲染元素时会自动调用该函数，el是当前元素的DOM实例（这里就是每个<el-input>组件的DOM元素）inputs[index]=el表示将这个DOM实例存储到inputs数组的第index个位置
              >
            </el-input>

逻辑

也就是说，当我的输入内容一旦有变化就会自动聚焦到下一个

javascript 复制代码

<script setup>
import { ref, nextTick } from 'vue';

// 存储输入的验证码,初始化一个数组
const code = ref(Array(6).fill(''));
// 存储输入框
const inputs = ref([]);

// 处理输入事件
const handleInput = (index) => {
  // 确保值已更新后再执行聚焦操作
  nextTick(() => {
    // 当输入内容且不是最后一个输入框时，聚焦到下一个
当输入框有值，并且当前输入框的索引数小于5的话，因为我们是从0开始的，那么就让存储存储输入框的索引值++，然后聚焦
    if (code.value[index] && index < 5) {
      inputs.value[index + 1]?.focus();
    }
  });
};

// 处理删除事件
const handleDelete = (index) => {
  // 当删除后当前输入框为空且不是第一个时，聚焦到上一个
当删除输入框的内容之后，正好满足if条件，这时让存储输入框的索引值减减，然后聚焦.focus就是聚焦
  if (!code.value[index] && index > 0) {
    inputs.value[index - 1]?.focus();
  }
};
</script>