VueJS表格中提交按钮按Enter键无效问题求助

问题根源 #

当前的问题有两个核心点：

1. 提交按钮未设置type="submit"属性，浏览器无法识别它为表单提交触发元素；
2. 现有键盘事件逻辑仅将焦点移到提交按钮，未处理按钮获得焦点后的Enter键触发逻辑。

解决方案1：利用原生表单提交机制 #

如果你的表单元素被<form>标签包裹，只需给按钮添加type="submit"并绑定表单提交事件：

模板修改：

<form @submit.prevent="onSubmitEditClick">
  <!-- 你的所有表单输入元素 -->
  
  <v-container
    v-if="init && init.permissionToEdit"
    fluid
    class="ma-0 pa-0 mt-3 d-flex flex-column align-center"
  >
    <v-btn
      x-small
      type="submit"
      @click="onSubmitEditClick"
    >
      Submit
    </v-btn>
  </v-container>
</form>

这样当焦点在提交按钮上时，按下Enter键会触发表单的submit事件，进而执行onSubmitEditClick方法。

解决方案2：修改键盘事件逻辑直接触发提交 #

如果不想依赖表单标签，可以在现有键盘处理逻辑中，定位到提交按钮时直接触发其点击事件：

main.js修改：

key: {
    enter: function (self, focusable, e) {
      if (e.which === 13) {
        e.preventDefault();

        const currentIndex = focusable.index(self);
        let nextIndex = currentIndex + 1;

        // 处理最后一个输入框的Enter键：直接触发提交
        if (nextIndex >= focusable.length) {
          const submitButton = $("button[type='submit']");
          if (submitButton.length > 0) {
            submitButton.click(); // 直接触发提交按钮的点击事件
            return false;
          }
        }

        // 原有焦点切换逻辑保留
        focusable.eq(nextIndex).focus().select();

        if (focusable.eq(nextIndex).is(":checkbox")) {
          focusable.eq(nextIndex).prop("checked", function(i, value) {
            return !value;
          });
        }

        return false;
      }
    },
},

模板同步修改（给按钮加type属性）：

<v-btn
  x-small
  type="submit"
  @click="onSubmitEditClick"
>
  Submit
</v-btn>

解决方案3：给按钮单独绑定Enter键事件 #

如果上述方案仍不生效，可以直接给提交按钮绑定keyup.enter事件：

<v-btn
  x-small
  @click="onSubmitEditClick"
  @keyup.enter="onSubmitEditClick"
>
  Submit
</v-btn>

这样当焦点在按钮上时，按下Enter键会直接触发提交方法。

内容的提问来源于stack exchange，提问作者Darreck Bercasio