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 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)
- It triggers the keyup event for selected element.
- 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.
- 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.
-
Before pressing on the button:
-
After pressing on the button:
- Before releasing the button:
-
After releasing the button:
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= </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:
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= </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:
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.
.png)
