Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

In this article, we are given an HTML document containing a text area and the task is to trigger the button when the user hit Enter button. We can do it by using the “keyup“, “keydown“, or “keypress” event listener on the 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 the user releases a key.

Syntax: 

textbox.addEventListner("keyup", FUNCTION);

FUNCTION is the name of the function we want to call when the event is fired.

Example: In this example, we will trigger the HTML button after hitting enter button in the textbox using Javascript using the keyup event in javascript.

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: 

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

keydown: This event is fired when the 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: In this example, we will trigger the HTML button after hitting enter button in the textbox using Javascript using the keydown event in javascript.

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: 

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

keypress: This event is fired when the user is pressing a key. 

Syntax: 

textbox.addEventListner("keypress", FUNCTION);

FUNCTION is the name of the function we want to call when the event is fired.

Example: In this example, we will trigger the HTML button after hitting enter button in the textbox using Javascript using the keypress event in javascript.

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 does not detect all keys in all browsers.

Output: 

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


My Personal Notes arrow_drop_up
Last Updated : 06 Feb, 2023
Like Article
Save Article
Similar Reads
Related Tutorials