講解原理或者思路：

如果你有多個el-input,想要實現每輸入完一個輸入框，然后自動聚焦到下一個輸入框，同理，如果每刪除一個輸入框的值，自動聚焦到上一個輸入框。

條件

那么首先要做的就是，設置條件，在什么時候自動聚焦到下一個呢？

比如監聽輸入內容，簡單點兒，在輸入完一個字符之后（或者說在監聽到輸入框有更新的時候）就自動聚焦到下一個，好，先看html結構

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

            <el-inputv-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>

邏輯

也就是說，當我的輸入內容一旦有變化就會自動聚焦到下一個

<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>