输入时没有提交按钮的表单

Question

对于表单，没有提交按钮，有 1 个文本输入，按回车提交。

对于表单，没有提交按钮，输入的文本超过 1 个，请不要按回车提交。

两者都不应在 Enter 时提交吗？

<!-- This one do submit on Enter --> 
<form action="/">
  <input type="text" name="firstname" value="Mickey">
</form>

<!-- This one do not submit on Enter --> 
<form action="/">
  <input type="text" name="firstname" value="Mickey">
  <input type="text" name="lastname" value="Jerry">
</form>

Answer 1

一般情况下，禁止按回车键作为提交表单的方式是不行的。那个收起来，你可以实现这种功能，使用JavaScript的jQuery库（你使用起来会更容易）。

这是您的 HTML 的修改版本。我添加了一个数据属性来标识那些不会在 Enter 键上提交的表单：

<!-- This one WILL NOT submit, when the Enter key is pressed -->
<form action="/" data-disable-enter="1">
    <input type="text" name="firstname" value="Mickey">
</form>

<!-- This one WILL submit, when the Enter key is pressed
     If you want to suppress the Enter key submission, add the data attribute data-disable-enter="1" -->
<form action="/">
    <input type="text" name="firstname" value="Mickey">
    <input type="text" name="lastname" value="Jerry">
</form>

这里是 JavaScript 代码，使用 jQuery 库来抑制 Enter 键表单提交。在所有具有数据属性 data-disable-enter="1" 的表单中，附加了一个事件侦听器以侦听每个表单元素（input、select 和 textarea）上的 keydown 事件。如果按下的键代码是 13 (which means "Enter")，那么我们将阻止与按键相关的默认操作，在我们的例子中是表单提交。

jQuery("form[data-disable-enter='1']").find("input, select, textarea").on("keydown", function(e){
    // 13 is the key code for the Enter key
    if(e.keyCode === 13){
        e.preventDefault();
    }
});

Answer 2

If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission, and must submit the form element from the form element itself otherwise.

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission

您可以在此处查看表单如何在没有提交按钮的情况下工作： https://www.tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/#no-submit-buttons

输入时没有提交按钮的表单

Form without submit button on Enter

html

forms

form-submit

submit-button