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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...