JavaScript Trigger a button on ENTER key
Last Updated :
08 Dec, 2023
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.
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=
</script>
</head>
<body>
<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>
</body>
</html>
|
Output:
JavaScript Trigger a button on ENTER key
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=
</script>
</head>
<body>
<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").keydown(function (event) {
if (event.keyCode === 13) {
$("#GFG_Button").click();
}
});
$("#GFG_Button").click(function () {
document.getElementById("gfg").innerHTML
= "Button clicked"
});
</script>
</body>
</html>
|
Output:
JavaScript Trigger a button on ENTER key
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=
</script>
</head>
<body>
<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>
</body>
</html>
|
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.
Share your thoughts in the comments
Please Login to comment...