JavaScript 如何在文本框中点击回车按钮后触发HTML按钮

一般来说，开发人员会添加提交按钮来提交输入字段的文本。然而，如果他们允许用户通过按回车键来提交输入值，就会改善应用程序的用户体验。

在这里，我们将学习使用按键监听器事件来检测按键的一般方法。之后，只要用户按了回车键，我们就可以执行任何操作。

语法

用户可以按照下面的语法来检测用户何时按下回车键。

input.addEventListener("keypress", function (event) {
   if (event.keyCode == 13) {
      // enter pressed
   }
});

在上面的语法中，我们已经为输入法添加了事件监听器。每当用户按下任何一个键，都会触发addEventListner()方法的回调函数。之后，我们检查所按下的键的键码。如果keyCode等于13，则表示按下了enter键。

例子1

在下面的例子中，我们已经创建了输入字段。同时，我们还创建了提交按钮，它调用了submitInput()函数并清除了输入框。

同时，我们在JavaScript中通过id访问了输入，并在输入栏上添加了addEventListner()方法。我们在addEventListner()方法中添加了按键事件。

event.keyCode返回按下的键的代码，如果它等于13，就意味着用户按下了回车键，我们就需要提交输入值。

<html>
<body>
   <h3> Using the <i> KeyPress </i> event to detect whenever user presses the enter. </h3>
   <p> Enter some text in the text box below and hit enter button </p>
   <input type = "text" id = "text_input">
   <br> <br>
   <button type = "submit" onclick = "submitInput()"> Submit </button>
   <div id = "output"> </div>
</body>
   <script>
      let output = document.getElementById('output');
      let input = document.getElementById('text_input');
      // function for submitInput button
      function submitInput() {
         input.value = "";
         output.innerHTML += "Input value submitted!";
      }
      // function to detect keypress event
      input.addEventListener("keypress", function (event) {
         // detect event key
         if (event.keyCode == 13) {
            input.value = "";
            output.innerHTML += "<br>Input value submitted!";
            alert("Button code executed.");
         }
      });
   </script>
</html>

例子2

在下面的例子中，我们使用了keydown事件来检测用户是否按下了任何键。每当用户按下任何一个键，都会触发keydown事件，之后，我们可以通过keyCode的值来确保用户已经按下了enter键。

每当用户按下回车键，我们就调用submitInput()函数，而不是在addEventListner()方法的回调函数中处理submit输入值。

<html>
   <body>
      <h3> Using the <i> Keydown </i> event to detect whenever user presses the enter. </h3>
      <p> Enter some text in the text box below and hit enter button </p>
      <input type = "text" id = "text_input">
      <br> <br>
      <button type = "submit" onclick = "submitInput()"> Submit </button>
      <div id = "output"> </div>
      <script>
         let output = document.getElementById('output');
         let input = document.getElementById('text_input');
         // function for submitInput button
         function submitInput() {
            input.value = "";
            output.innerHTML += "<br>Input value submitted!";
            alert("Button code executed.");
         }
         // function to detect keypress event
         input.addEventListener("keydown", function (event) {
            // detect event key
            if (event.keyCode == 13) {
               submitInput();
            }
         });
      </script>
   </body>
</html>

例子3

在下面的例子中，我们使用了 “keyup “事件，当用户在按下任何一个键后释放时，该事件会被触发。同时，我们使用addEventListner()方法在按钮上添加了点击事件监听器。

<html>
<body>
   <h3> Using the <i> Keyup </i> event to detect whenever user presses the enter</h3>
   <p> Enter some text in the text box below and hit enter button </p>
   <input type = "text" id = "text_input">
   <br> <br>
   <button type = "submit" id = "btn"> Submit </button>
   <div id = "output"> </div>
</body>
   <script>
      let output = document.getElementById('output');
      let input = document.getElementById('text_input');
      let btn = document.getElementById('btn');
      btn.addEventListener('click', function () {
         input.value = "";
         output.innerHTML = "Input value submited!";
      })
      input.addEventListener("keydown", function (event) {
         if (event.keyCode == 13) {
            input.value = "";
            output.innerHTML = "<br>Input value submited!";
            alert("Button code executed.");
         }
      });
   </script>
</html>