JavaScript Trigger a button on ENTER key
In this article, we will see how to trigger a button on the ENTER key. To trigger a click button on ENTER key, We can use any of the keyup(), keydown() and keypress() events of jQuery.
Table of Content
- Using keyup() event
- Using keydown() event
- Using keypress() event
Method 1: Using keyup() event:
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. It Attaches a function to the keyup event.
$(selector).keyup(function);
Example: This example uses a keyup() event to trigger the enter key as a button.
HTML
<!DOCTYPE html> < html > < head > < title > Rename object key in JavaScript </ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > </ script > </ head > < body > < h1 style = "color:green;" > w3wiki </ 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 > </ body > </ html > |
Output:
Method 2: Using keydown() event:
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. It Attaches a function to the keydown event.
$(selector).keydown(function);
Example : This example uses keydown() event to trigger enter key as a button.
HTML
<!DOCTYPE html> < html > < head > < title > Rename object key in JavaScript </ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > </ script > </ head > < body > < h1 style = "color:green;" > w3wiki </ 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").keydown(function (event) { if (event.keyCode === 13) { $("#GFG_Button").click(); } }); $("#GFG_Button").click(function () { document.getElementById("gfg").innerHTML = "Button clicked" }); </ script > </ body > </ html > |
Output:
Method 3: Using keypress() event:
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. It Attaches a function to the keypress event.
$(selector).keypress(function);
Example : This Example uses keypress() event to trigger enter key as a button
HTML
<!DOCTYPE html> < html > < head > < title > Rename object key in JavaScript </ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > </ script > </ head > < body > < h1 style = "color:green;" > w3wiki </ 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 > </ 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.
Contact Us