How to trigger HTML button after hitting enter button in textbox using JavaScript ?

05 Oct, 2021
Given an HTML document containing text area and the task is to trigger the button when the user hit Enter button. We can do it by using “keyup”, “keydown”, or “keypress” event listener on textbox depending on the need. When this event is triggered, we check if the key pressed is ENTER or not. If the key pressed is not ENTER, we do nothing. We will make an example that will append the content of the textbox in div when ENTER is pressed using all three event listeners.
keyup: This event is fired when user releases a key. Syntax: 
textbox.addEventListner("keyup", FUNCTION);
FUNCTION is the name of function we want to call when event is fired.
Example: 
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>
Output: 
keydown: This event is fired when user is pressing a key. Syntax: 
textbox.addEventListner("keydown", FUNCTION);
FUNCTION is the name of the function we want to call when the event is fired.
Example: 
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>
Output: 
keypress: This event is fired when user is pressing a key. Syntax: 
textbox.addEventListner("keypress", FUNCTION);
FUNCTION is the name of function we want to call when event is fired.
Example: 
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>
Note: Both keypress and keydown events keep repeating till the key is pressed down. Both may show similar result but keypress do not detect all keys in all browsers.
Output: 
 
adnanirshad158
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS