按回车触发提交（以及如果单击提交按钮）答案

【问题标题】：Trigger submit on pressing enter (as well if submit button is clicked)按回车触发提交（以及如果单击提交按钮）
【发布时间】：2020-05-16 14:40:50
【问题描述】：

我知道以前有人问过这个问题，并且我已经仔细阅读了回复，但仍然无法在我的代码中使用它。

这就是我想要实现的目标：

有一个文本输入字段。用户在字段中键入。单击“提交”按钮后，屏幕上会出现“完成”字样。我可以毫无困难地完成这部分。但是，我也希望用户能够通过在输入字段中点击“输入”来提交，而不是必须点击“提交”按钮（尽管我仍然希望提交按钮也可以工作 - 基本上用户有两个选项关于如何提交，点击提交按钮，或回车）。

我按照 W3 上的说明进行操作，代码如下：

var input = document.getElementById("myInput");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("submit").click();
  }
});

function myFunction() {
document.getElementById("demo1").innerHTML =  "done";

}

<div class = 'method'>
  <form id="myFunction">
    <h3>myFunction():</h3>
    <input id="myInput" name="name">
    <button id="submit" type="button" onclick="myFunction()">Submit</button>
    <div id="demo1">function result on submit goes here</div>
  </form>
</div>

我错过了什么？

提前致谢

【问题讨论】：

标签： javascript html dom form-submit

【解决方案1】：

通过使用<button type="submit"> 而不是type="button"，您将不需要javascript 来检测击键。点击提交按钮和回车都会导致onsubmit 事件在表单上触发。通过调用event.preventDefault()，您可以确保提交表单后浏览器不会导航。

function myFunction(event) {
  event.preventDefault();
  document.getElementById("demo1").innerHTML = "done";
}

<div class='method'>
  <form id="myFunction" onsubmit="myFunction(event)">
    <h3>myFunction():</h3>
    <input id="myInput" name="name">
    <button type="submit">Submit</button>
    <div id="demo1">function result on submit goes here</div>
  </form>
</div>

【讨论】：

【解决方案2】：

您不需要向按钮或输入添加事件侦听器。

而是将事件侦听器添加到您的表单并阻止默认事件，因为表单可以通过“输入”键和提交按钮提交（按钮需要是“提交”类型）。

document.getElementById('myFunction').addEventListener('submit', myFunction)

function myFunction(e) {
  e.preventDefault();
  document.getElementById("demo1").innerHTML = "done";
}

<div class='method'>
  <form id="myFunction">
    <h3>myFunction():</h3>
    <input id="myInput" name="name">
    <button id="submit" type="submit">Submit</button>
    <div id="demo1">function result on submit goes here</div>
  </form>
</div>

【讨论】：

【解决方案3】：

您可以简化代码以监听提交事件，该事件将在通过按 Enter 或单击提交按钮提交表单时触发：

var input = document.getElementById("myInput");
var form = document.getElementById( "myFunction" );

form.addEventListener( "submit", function( e ){

  e.preventDefault();
  document.getElementById( "demo1" ).innerHTML = "done";

});

<div class='method'>
  <form id="myFunction">
    <h3>myFunction():</h3>
    <input id="myInput" name="name">
    <button id="submit" type="submit">Submit</button>
    <div id="demo1">function result on submit goes here</div>
  </form>
</div>

【讨论】：

您的 sn-p 中的按钮未提交。