表单无提交按钮输入

Question

对于表单，无需提交按钮，带有1个文本输入，按Enter键提交。

对于窗体，如果没有提交按钮，超过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

一般来说，它是不行的压制回车键的方式来提交表单。这被放弃，您可以实现这种功能，使用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库来抑制回车键提交表单。附上一个事件监听器，用于侦听每个表单元素（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(); 
    } 
});