使用 JavaScript 在文本框中点击 Enter 按钮后如何触发 HTML 按钮？

给定一个包含文本区域的 HTML 文档，任务是在用户点击 Enter 按钮时触发按钮。我们可以根据需要在文本框上使用“keyup”、“keydown”或“keypress”事件侦听器来实现。当这个事件被触发时，我们检查按下的键是否是ENTER 。如果按下的键不是ENTER ，我们什么都不做。我们将制作一个示例，当按下ENTER时，使用所有三个事件侦听器将文本框的内容附加到 div 中。

• keyup：当用户释放按键时触发此事件。
  句法：

  textbox.addEventListner("keyup", FUNCTION);

  FUNCTION 是我们要在事件触发时调用的函数的名称。

  例子：

    
  
      
      
          How to trigger HTML button after hitting
          enter button in textbox using JavaScript?
      
  
    
  
      Enter Your Message:
      
        
      
      
      
        
      
      GeeksForGeeks
        
      
      
    
      
          var msg = document.getElementById("message");
          var button = document.getElementById("button");
          var textBox = document.getElementById("textbox");
    
          // This event is fired when button is clicked
          button.addEventListener("click", function () {
              var str = textBox.value;
              console.log(str);
              msg.innerHTML += "<p>" + str + "</p>";
          });
    
          textBox.addEventListener("keyup", function (event) {
    
              // Checking if key pressed is ENTER or not
              // if the key pressed is ENTER
              // click listener on button is called
              if (event.keyCode == 13) {
                  button.click();
              }
          });
      
  
    

  输出：
  

• keydown：当用户按下某个键时会触发此事件。
  句法：

  textbox.addEventListner("keydown", FUNCTION);

  FUNCTION 是我们要在事件触发时调用的函数的名称。

  例子：

    
  
      
      
          How to trigger HTML button after hitting
          enter button in textbox using JavaScript?
      
  
    
  
      Enter Your Message:
      
        
      
      
      
        
      
      GeeksForGeeks
        
      
      
    
      
          var msg = document.getElementById("message");
          var button = document.getElementById("button");
          var textBox = document.getElementById("textbox");
    
          // This event is fired when button is clicked
          button.addEventListener("click", function () {
              var str = textBox.value;
              console.log(str);
              msg.innerHTML += "<p>" + str + "</p>";
          });
    
          textBox.addEventListener("keydown", function (event) {
    
              // Checking if key pressed is ENTER or not
              // if the key pressed is ENTER
              // click listener on button is called
              if (event.keyCode == 13) {
                  button.click();
              }
          });
      
  
    

  输出：
  

• keypress：当用户按下某个键时会触发此事件。
  句法：

  textbox.addEventListner("keypress", FUNCTION);

  FUNCTION 是我们要在事件触发时调用的函数的名称。

  例子：

    
  
      
      
          How to trigger HTML button after hitting
          enter button in textbox using JavaScript?
      
  
    
  
      Enter Your Message:
    
      
      
        
      
      GeeksForGeeks
        
      
      
    
      
          var msg = document.getElementById("message");
          var button = document.getElementById("button");
          var textBox = document.getElementById("textbox");
    
          // This event is fired when button is clicked
          button.addEventListener("click", function () {
              var str = textBox.value;
              console.log(str);
              msg.innerHTML += "<p>" + str + "</p>";
          });
    
          textBox.addEventListener("keypress", function (event) {
    
              // Checking if key pressed is ENTER or not
              // if the key pressed is ENTER
              // click listener on button is called
              if (event.keyCode == 13) {
                  button.click();
              }
          });
      
  
    

  注意： keypress和keydown事件都会不断重复，直到按键被按下。两者都可能显示相似的结果，但按键不会检测到所有浏览器中的所有键。

  输出：