JavaScript | Trigger a button on ENTER key

27 Jul, 2021
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 to run a function when a keyup event occurs.Syntax:It triggers the keyup event for selected element.$(selector).keyup()It Attaches a function to the keyup event.$(selector).keyup(function)
Syntax:
It triggers the keyup event for selected element.$(selector).keyup()
$(selector).keyup()
It Attaches a function to the keyup event.$(selector).keyup(function)
$(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 selected element.$(selector).keydown()It Attaches a function to the keydown event.$(selector).keydown(function)
It triggers the keydown event for selected element.$(selector).keydown()
$(selector).keydown()
It Attaches a function to the keydown event.$(selector).keydown(function)
$(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 to run 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 selected element.$(selector).keypress()It Attaches a function to the keypress event.$(selector).keypress(function)
It triggers the keypress event for selected element.$(selector).keypress()
$(selector).keypress()
It Attaches a function to the keypress event.$(selector).keypress(function)
$(selector).keypress(function)
Example 1: This Example uses keypress() event to trigger enter key as a button.
<!DOCTYPE html>  <html>    <head>     <title>         JavaScript | Trigger a button on ENTER key     </title>          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">    </script></head>          <body style = "text-align:center;">           <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>                  <script>         $("#pass").keypress(function(event) {            if (event.keyCode === 13) {                $("#GFG_Button").click();            }        });           $("#GFG_Button").click(function() {            alert("Button clicked");        });    </script> </body>    </html> 
Output:
Before pressing on the button:
After pressing on the button:
Example 2: This example uses keyup() event to trigger enter key as a button.
<!DOCTYPE html>  <html>    <head>     <title>         JavaScript | Trigger a button on ENTER key     </title>          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">    </script></head>          <body style = "text-align:center;">           <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>                  <script>         $("#pass").keyup(function(event) {            if (event.keyCode === 13) {                $("#GFG_Button").click();            }        });           $("#GFG_Button").click(function() {            alert("Button clicked");        });    </script> </body>    </html>  
Output:
Before releasing the button:
After releasing the button:
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.
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.