Vue在表单内按Enter时阻止表单提交答案

【问题标题】：Vue Prevent form submit when pressing enter inside formVue在表单内按Enter时阻止表单提交
【发布时间】：2022-01-06 03:28:30
【问题描述】：

我有一个包含多个表单的 web 应用程序，在这些表单中包含多个自定义组件：输入、文本区域、选择框、日期选择器、单选按钮、复选框……。

我发现在表单标签的子组件中按下回车键时会触发提交功能。我不想要的东西。我希望能够将 Enter 键用于其他操作，例如在下拉列表中选择选择。

表格示例

<template>
    <form @submit.prevent="handleLogin">
        <fieldset :disabled="isSubmitting" class="space-y-6">
            <Input :label="$tc('email', 1)" type="email" id="email" v-model="user.email" :error="errors.email" />
            <Input :label="$tc('password', 1)" type="password" id="password" v-model="user.password" :error="errors.password" />
            <Select :label="$tc('role', 1)" id="role" :options="roles" displayProperty="display_name" valueProperty="id" v-model="user.role" :error="errors.role" />
            <SubmitButton :label="$tc('register', 1)" :submittingLabel="$tc('register_loader', 1)" :isSubmitting="isSubmitting" />
        </fieldset>
    </form>
</template>

SubmitButton.vue

<button type="submit">{{ isSubmitting ? submittingLabel : label }}</button>

因此，我正在寻找一种方法来防止默认行为。添加一个 keydown 函数并检查是否在所有自定义组件中按下了 enter 键，然后是 event.preventDefault() 并没有成功。

一个可行的解决方案应该是将按钮的类型从“提交”更改为“按钮”并使用@click，但这听起来不像语义 html。

还有其他建议吗？

【问题讨论】：

标签： javascript forms vue.js

【解决方案1】：

您可以在输入键按下时阻止提交，只需注释顶级表单。

<form @submit.prevent="handleLogin" @keydown.enter="$event.preventDefault()">

你可以在action看到它

【讨论】：