需求：实现回车键跳转任意输入框（无视必填/类型），优先Vue.js 2方案

阿华AIGC实验室

2026-5-15

解决方案：回车跳转所有表单控件（含非必填）

我来帮你解决这个回车跳转输入框的问题，不管输入框是否必填、类型如何都能正常跳转，同时也给你提供Vue.js 2的实现方案。

一、jQuery修复方案

你原来的代码问题在于没有限定表单范围，$(':input')会选中页面上所有的表单控件，导致索引计算错误，进而跳过部分非必填控件。我们需要把选择器限定在当前表单内部，确保只遍历当前表单里的输入/选择框：

$("form input, form select").bind("keydown", function(event) {
    if (event.which === 13) {
        event.stopPropagation();
        event.preventDefault();
        // 限定在当前表单内查找所有可见的表单控件
        const $allInputs = $(this).closest('form').find(':input:visible');
        const currentIndex = $allInputs.index(this);
        // 计算下一个索引，支持最后一个控件按回车循环到第一个（不需要可删除循环逻辑）
        const nextIndex = (currentIndex + 1) % $allInputs.length;
        $allInputs.eq(nextIndex).focus();
    }
});

关键改进点：

用$(this).closest('form').find(':input:visible')锁定当前表单内的可见控件，避免干扰页面其他表单元素
增加:visible过滤，确保不会跳转到隐藏的控件
可选实现循环跳转逻辑，若不需要可改为if(currentIndex < $allInputs.length -1) { $allInputs.eq(currentIndex+1).focus() }

二、Vue.js 2实现方案

如果想迁移到Vue2开发，我们可以通过ref标记表单元素，配合@keydown.enter事件实现精准的跳转控制：

模板部分

<template>
  <form>
    <ul>
      <li>
        <input 
          class='form-control input' 
          type='text' 
          :name="variables[2]" 
          :placeholder="$t('language.' + variables[2])" 
          required
          ref="formInputs"
          @keydown.enter="jumpToNextInput"
        />
        {{ $t('language.' + variables[2]) }} *
      </li>
      <li>
        <input 
          class='form-control input' 
          type='text' 
          :name="variables[3]" 
          :placeholder="$t('language.' + variables[3])" 
          required
          ref="formInputs"
          @keydown.enter="jumpToNextInput"
        />
        {{ $t('language.' + variables[3]) }} *
      </li>
      <li>
        <input 
          class='form-control input' 
          type='text' 
          :name="variables[4]" 
          :placeholder="$t('language.' + variables[4])"
          ref="formInputs"
          @keydown.enter="jumpToNextInput"
        />
        {{ $t('language.' + variables[4]) }}
      </li>
      <li>
        <select 
          class='form-control input' 
          :name="variables[5]" 
          required
          ref="formInputs"
          @keydown.enter="jumpToNextInput"
        >
          <option>{{ $t('language.chose') }}</option>
          <option v-for="unit in units" :key="unit.id" :value="unit.id">{{ unit.unit_name }}</option>
        </select>
        {{ $t('language.item_default_unit') }} *
      </li>
      <li>
        <select 
          class='form-control input' 
          :name="variables[6]"
          ref="formInputs"
          @keydown.enter="jumpToNextInput"
        >
          <option>{{ $t('language.chose') }}</option>
          <option v-for="color in colors" :key="color.id" :value="color.id">{{ color.color_name }}</option>
        </select>
        {{ $t('language.color') }}
      </li>
      <li>
        <input 
          class='form-control input' 
          type='number' 
          :name="variables[7]" 
          :placeholder="$t('language.' + variables[7])"
          ref="formInputs"
          @keydown.enter="jumpToNextInput"
        />
        {{ $t('language.' + variables[7]) }}
      </li>
      <li>
        <input 
          class='form-control input' 
          type='number' 
          :name="variables[8]" 
          :placeholder="$t('language.' + variables[8])"
          ref="formInputs"
          @keydown.enter="jumpToNextInput"
        />
        {{ $t('language.' + variables[8]) }}
      </li>
      <li>
        <input 
          class='form-control input' 
          type='number' 
          :name="variables[9]" 
          :placeholder="$t('language.' + variables[9])"
          ref="formInputs"
          @keydown.enter="jumpToNextInput"
        />
        {{ $t('language.' + variables[9]) }}
      </li>
    </ul>
  </form>
</template>

脚本部分

export default {
  data() {
    return {
      variables: [], // 你的变量数组
      units: [], // 单位数据集合
      colors: [] // 颜色数据集合
    }
  },
  methods: {
    jumpToNextInput(event) {
      event.preventDefault();
      // 获取所有标记了ref="formInputs"的表单元素
      const allInputs = this.$refs.formInputs;
      // 找到当前触发事件的元素索引
      const currentIndex = allInputs.findIndex(input => input === event.target);
      // 计算下一个元素的索引，支持循环跳转
      const nextIndex = (currentIndex + 1) % allInputs.length;
      // 聚焦到下一个表单元素
      allInputs[nextIndex].focus();
    }
  }
}