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

在本文中，我们提供了一个包含文本区域的HTML文档，并且任务是在用户按下回车键时触发按钮。我们可以根据需要在文本框上使用“keyup”、“keydown”或“keypress”事件监听器来实现。当触发此事件时，我们检查按下的键是否是“ENTER”。如果按下的键不是“ENTER”，我们不做任何操作。我们将创建一个示例，当按下“ENTER”键时，将文本框的内容追加到div中，分别使用这三个事件监听器。

keyup ：当用户释放键时触发此事件。

语法：

textbox.addEventListner("keyup", FUNCTION);

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

示例： 在这个示例中，我们将使用Javascript中的keyup事件，在文本框中按下回车键后触发HTML按钮。

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
  
<head> 
    <meta charset="utf-8" /> 
    <title> 
        How to trigger HTML button after hitting 
        enter button in textbox using JavaScript? 
    </title> 
</head> 
  
<body> 
    <label for="message"> 
          Enter Your Message: 
      </label> 
    <br><br> 
      
    <!-- Textbox -->
    <input type="text" id="textbox" name="message"> 
    <br><br> 
      
    <!-- Button we want to trigger on ENTER in Textbox -->
    <button id="button">GeeksForGeeks</button> 
      
    <!-- The div element in which we will  
        append our data from text box -->
    <div id="message"></div> 
  
    <script> 
        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(); 
            } 
        }); 
    </script> 
</body> 
</html>

输出：

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

keydown（按键按下） : 该事件在用户按下键时触发。

语法：

textbox.addEventListner("keydown", FUNCTION);

FUNCTION是当事件被触发时我们想要调用的函数的名字。

示例： 在这个示例中，我们将使用Javascript的keydown事件，在文本框中按下回车键后触发HTML按钮。

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
  
<head> 
    <meta charset="utf-8" /> 
    <title> 
        How to trigger HTML button after hitting 
        enter button in textbox using JavaScript? 
    </title> 
</head> 
  
<body> 
    <label for="message"> 
          Enter Your Message: 
      </label> 
    <br><br> 
      
    <!-- Textbox -->
    <input type="text" id="textbox" name="message"> 
    <br><br> 
      
    <!-- Button we want to trigger on ENTER in Textbox -->
    <button id="button">GeeksForGeeks</button> 
      
    <!-- The div element in which we will  
        append our data from text box -->
    <div id="message"></div> 
  
    <script> 
        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(); 
            } 
        }); 
    </script> 
</body> 
</html>

输出:

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

keypress ：当用户按下一个键时触发此事件。

语法:

textbox.addEventListner("keypress", FUNCTION);

FUNCTION是当事件被触发时，我们想要调用的函数的名称。

示例： 在这个示例中，我们将使用javascript的keypress事件，在文本框中按下enter键后触发HTML按钮。

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
  
<head> 
    <meta charset="utf-8" /> 
    <title> 
        How to trigger HTML button after hitting 
        enter button in textbox using JavaScript? 
    </title> 
</head> 
  
<body> 
    <label for="message"> 
          Enter Your Message: 
      </label><br><br> 
  
    <!-- Textbox -->
    <input type="text" id="textbox" name="message"><br><br> 
      
    <!-- Button we want to trigger on ENTER in Textbox -->
    <button id="button">GeeksForGeeks</button> 
      
    <!-- The div element in which we will  
        append our data from text box -->
    <div id="message"></div> 
  
    <script> 
        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(); 
            } 
        }); 
    </script> 
</body> 
</html>