在按下回车键时触发提交(如果点击提交按钮也是如此)

Question

我知道以前有人问过这个问题，我也仔细阅读了回答，但还是无法在我的代码中实现。

这是我想实现的。

有一个文本输入栏 用户在该字段中输入信息。当点击 "提交 "按钮时，屏幕上出现 "完成 "一词。我可以毫不费力地完成这部分。然而，我也希望用户在输入栏中输入'enter'就能提交，而不是点击'submit'按钮（尽管我仍然希望提交按钮也能工作--基本上用户有两个选择，点击提交按钮或点击enter）。

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

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

Answer 3

你可以简化你的代码来监听提交事件，当表单通过点击回车键或点击提交按钮提交时，该事件就会触发。

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>