按回车触发提交（以及如果提交按钮被点击）

Question

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

这是我想要实现的：

有一个文本输入字段。用户在字段中键入。单击 'submit' 按钮时，屏幕上会出现 'done' 一词。我可以毫无困难地完成这部分。但是，我还希望用户在输入字段中时能够通过点击 'enter' 来提交，而不必点击 'submit' 按钮（尽管我仍然希望提交按钮也能工作——基本上用户可以通过单击提交按钮或按回车键两种方式提交。

我按照 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>

我错过了什么？

提前致谢

Answer 1

您可以简化代码以侦听提交事件，该事件将在按回车键或单击提交按钮提交表单时触发：

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>

Answer 2

通过使用 <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>

Answer 3

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

改为将事件侦听器添加到您的表单并阻止默认事件，因为表单可以通过 'enter' 键和提交按钮（按钮必须是 'submit' 类型）提交。

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>

按回车触发提交（以及如果提交按钮被点击）

Trigger submit on pressing enter (as well if submit button is clicked)

html

javascript

dom

form-submit