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

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

  • keydown: This event is fired when user is pressing a key.
    Syntax:



    textbox.addEventListner("keydown", FUNCTION);

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

    Exmaple:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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.

    Exmaple:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.