Vue.js 中回车键切换输入框焦点：逐步指南

2024-03-01 16:34:42

Vue.js 中使用回车键切换输入框焦点的指南

在 Vue.js 应用程序中，你可以通过几个简单的步骤实现按下回车键后将焦点切换到下一个输入框的功能。这种方法特别适用于需要顺序输入数据的表单或需要快速导航多项输入框的用户界面。

侦听回车键事件

第一步是使用 v-on:keyup.enter 指令在第一个输入框上侦听回车键事件。这个指令允许你在按下回车键时触发特定方法。

<input v-on:keyup.enter="focusNextInput">

定义 focusNextInput 方法

接下来，你需要在 Vue 组件中定义一个名为 focusNextInput 的方法。这个方法负责将焦点切换到下一个输入框。

focusNextInput() {
  this.$nextTick(() => {
    this.$refs.nextInput.focus();
  });
}

this.$nextTick() 确保在 DOM 更新后才执行焦点操作，避免焦点丢失问题。
this.$refs.nextInput 引用下一个输入框的 DOM 元素，以便可以将焦点移动到它上面。

引用下一个输入框

为了能够在 focusNextInput 方法中访问下一个输入框，你需要使用 ref 属性对其进行引用。

<input ref="nextInput">

完整的代码示例

将这些步骤组合在一起，你可以实现以下完整的代码示例：

<template>
  <div>
    <input v-on:keyup.enter="focusNextInput">
    <input ref="nextInput">
  </div>
</template>

<script>
export default {
  methods: {
    focusNextInput() {
      this.$nextTick(() => {
        this.$refs.nextInput.focus();
      });
    }
  }
};
</script>