“输入”时未提交Vuej表单

wswtfjt7 于 2023-03-19 发布在 Vue.js

关注(0)|答案(5)|浏览(145)

TL;DR问题

为什么我不能在一个表单中使用2个相同的输入字段，并使用回车按钮提交表单

更详细的问题

开门见山，我尝试使用enter按钮来提交表单，当input元素被聚焦时，它应该会发出一个事件。

我在这里写了一个codepen，它复制了“怪异”的行为：https://codepen.io/anon/pen/gqGMmW

如您所见，如果我有多个相同类型的输入（例如，2个input="text"输入），当我在聚焦于某个输入时按下enter按钮时，它无法发出submit事件。
在它下面的第二个应用程序示例中，我有一个完全相同的表单，有完全相同的vuejs示例化，但只有 * 一个 * 输入字段，当你在关注该元素时按enter键，它会正确地发出submit事件。
我试着谷歌什么可能是怎么回事在这里，但努力找到任何用途除了“防止形式提交输入”。
我试过给元素添加ID属性、name属性等，但它仍然不能按预期工作。
我不是vuejs的初学者，但也不是一个高级的JS用户，所以“简单”的答案将受到赞赏：D
如果需要更多的信息，请让我知道，我会提供尽可能多的

vue.js

来源：https://stackoverflow.com/questions/54542724/vuejs-form-not-submitting-on-enter

5条答案

按热度按时间

hjzp0vay1#

请确保您的表单具有以下任一项

<button type="submit">Submit</button>

或

<input type="submit" value="Submit" />

如果不想显示该按钮，可以使用

<input type="submit" style="position: absolute; left: -9999px"/>

您可以在此问题Submitting a form by pressing enter without a submit button中找到有关隐藏按钮的详细信息

赞(0）回复(0）举报 2023-03-19

zfycwa2u2#

在Vue 3上，我们可以直接在表格中添加@keyup.enter事件。
这里有一个例子。

<form @keyup.enter="handleSubmit($event, onSubmit)">

赞(0）回复(0）举报 2023-03-19

ffx8fchx3#

我尝试了许多不同的解决方案，但没有一个对我有效。也许是因为我的表单中有几个按钮，其中只有一个按钮应该提交表单。
This是最终起作用的：对输入的最后一个元素使用@keyup.enter，如下所示：

<input type="text" @keyup.enter="save" />

这样，当用户在填写完表单的最后一个字段后按回车键时，表单就会被提交。
在我的例子中，我有一个<v-text-field>而不是<input>，但应该没有什么区别。

赞(0）回复(0）举报 2023-03-19

hfsqlsce4#

帮我解决了。不要在窗体元素上挂载Vue。在窗体的父元素上挂载Vue。

<form
    id="app"
    method="post"
    novalidate="true"
    @submit="onSubmit"
>

<div id="app">
    <form
        method="post"
        novalidate="true"
        @submit="onSubmit"
    >

赞(0）回复(0）举报 2023-03-19

wr98u20j5#

这更像是一种规范，而不是一种奇怪的行为：
只有当您正好有一个输入字段和一个提交按钮时，回车键才会自动提交表单。
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission

赞(0）回复(0）举报 2023-03-19