JavaScript Trigger a button on ENTER key

To trigger a click button on ENTER key, We can use any of the keyup(), keydown() and keypress() events of jQuery.

keyup(): This event occurs when a keyboard key is released. The method either triggers the keyup event, or runs a function when a keyup event occurs. 

Syntax:

It triggers the keyup event for the selected element.

$(selector).keyup()

It Attaches a function to the keyup event.

$(selector).keyup(function)

keydown(): This event occurs when a keyboard key is pressed. The method either triggers the keydown event, or to run a function when a keydown event occurs. 

Syntax:

It triggers the keydown event for the selected element.

$(selector).keydown()

It Attaches a function to the keydown event.

$(selector).keydown(function)

keypress(): This event is similar to keydown event. This event occurs when a keyboard key is released. The method either triggers the keypress event or runs a function when a keypress event occurs. 

Note: This event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC). 

Syntax:

It triggers the keypress event for the selected element.

$(selector).keypress()

It Attaches a function to the keypress event.

$(selector).keypress(function)

Example 1: This Example uses keypress() event to trigger enter key as a button

HTML

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<h1 style="color:green;">
    GeeksForGeeks
</h1>

Username:<input id="uname" type="text"><br>
Password:<input id="pass" type="password"><br>
<button id="GFG_Button">Submit</button>
<p id="gfg"></p>

<script>
    $("#pass").keypress(function(event) {
        if (event.keyCode === 13) {
            $("#GFG_Button").click();
        }
    });

    $("#GFG_Button").click(function() {
        document.getElementById("gfg").innerHTML= `Button clicked after
                                                   ENTER button is pressed`
    });
</script>

Output:

JavaScript Trigger a button on ENTER key

Example 2: This example uses keyup() event to trigger enter key as a button.

HTML

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<h1 style="color:green;">
    GeeksforGeeks
</h1>

Username:<input id="uname"
                type="text">
<br>
Password:<input id="pass"
                type="password">
<br>
<button id="GFG_Button">Submit</button>
<p id="gfg"></p>
<script>
    $("#pass").keyup(function(event) {
        if (event.keyCode === 13) {
            $("#GFG_Button").click();
        }
    });

    $("#GFG_Button").click(function() {
        document.getElementById("gfg").innerHTML = "Button clicked"
    });
</script>

Output:

JavaScript Trigger a button on ENTER key

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.