Vue3回车键实现 Tab 键功能 3个月前

最近用vue做一个页面的tab功能,客户需要用回车换行。以下这段代码实现了在这3个文本输入框中，按下回车键时模拟 Tab 键的效果，将焦点切换到下一个输入框。

copy
<template>
  <div @keydown="handleKeyDown">
    <el-input v-model="input1" style="width: 240px" placeholder=" 请输入" />
    <div style="margin: 20px 0" />
    <el-input v-model="input2" style="width: 240px" placeholder=" 请输入" />
    <div style="margin: 20px 0" />
    <el-input v-model="input3" style="width: 240px" placeholder=" 请输入" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const input1 = ref("");
const input2 = ref("");
const input3 = ref("");

// 处理键盘按下事件
const handleKeyDown = (event: KeyboardEvent) => {
  if (event.keyCode === 13) {
    // 回车键的键码为 13
    event.preventDefault();
    const inputs: any = document.querySelectorAll("input, select");
    let currentIndex = -1;
    for (let i = 0; i < inputs.length; i++) {
      if (inputs[i] === event.target) {
        currentIndex = i;
        break;
      }
    }
    if (currentIndex >= 0 && currentIndex < inputs.length - 1) {
      inputs[currentIndex + 1].focus();
    }
  }
};
</script>

如有疑问或其他问题。可以根据自己的需求修改一下。