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

如果表单没有提交按钮，则隐式提交如果表单具有多个字段，则机制必须不执行任何操作阻止隐式提交，并且必须从中提交表单元素否则就形成元素。

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

Answer 2

通常，不能将Enter键作为提交表单的方式。放弃之后，您可以使用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键表单提交。附加事件侦听器以在具有数据属性keydown的所有表单中的每个表单元素（input，select和textarea）上侦听data-disable-enter="1"事件。如果按下的键代码是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();
    }
});

输入

2 个答案: