JavaScript Trigger a button on ENTER key
Last Updated :
12 Sep, 2024
To trigger a button click on pressing the ENTER key in JavaScript, you can add an event listener for the keypress or keydown event on an input field. The button’s click event is programmatically triggered when the ENTER key (key code 13) is detected.
Method 1: Using keyup() event:
The keyup() event triggers when a keyboard key is released. It can programmatically trigger a button click when the Enter key (key code 13) is released, updating text or performing actions.
Syntax:
It triggers the keyup event for the selected element. It Attaches a function to the keyup event.
$(selector).keyup(function);
Example: In this example the Enter key in the password input, triggers the button click event, and updates the paragraph text to “Button clicked” when the button is pressed.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Rename object key in JavaScript
</title>
</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>
// Adding keyup event listener to the password input
document.getElementById("pass").addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
// Check if Enter key is pressed
document.getElementById("GFG_Button").click();
// Trigger button click
}
});
// Adding click event listener to the button
document.getElementById("GFG_Button").addEventListener("click", function () {
// Update paragraph text
document.getElementById("gfg").innerHTML = "Button clicked";
});
</script>
</body>
</html>
Output:
JavaScript Trigger a button on ENTER key
Method 2: Using keydown() event:
The keydown() event triggers when a keyboard key is pressed down. It detects the Enter key in the password field and initiates the button’s click event before the key is released, updating the output.
Syntax:
It triggers the keydown event for the selected element. It Attaches a function to the keydown event.
$(selector).keydown(function);
Example : In this example we includes a username and password input. JavaScript triggers the button click when Enter is pressed in the password field, displaying “Button clicked” in a paragraph element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Rename object key in JavaScript</title>
</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>
document.getElementById("pass").addEventListener("keydown", function (event) {
if (event.keyCode === 13) {
document.getElementById("GFG_Button").click();
}
});
document.getElementById("GFG_Button").addEventListener("click", function () {
document.getElementById("gfg").innerHTML = "Button clicked";
});
</script>
</body>
</html>
Output:
JavaScript Trigger a button on ENTER key
Method 3: Using keypress() event:
The keypress() event triggers when a key is pressed and released. It’s similar to keydown but does not fire for non-character keys (e.g., ALT, CTRL). It handles Enter key presses to trigger button actions.
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 : In this example we have a form with a username and password input. JavaScript listens for the Enter key in the password field and triggers a button click, updating text on click.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Rename object key in JavaScript</title>
</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>
// Adding keypress event listener to the password input
document.getElementById("pass").addEventListener("keypress", function (event) {
if (event.keyCode === 13) {
// Triggering click event on button when Enter key is pressed
document.getElementById("GFG_Button").click();
}
});
// Adding click event listener to the button
document.getElementById("GFG_Button").addEventListener("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.
Similar Reads
How to trigger events in JavaScript ?
JavaScript is a high-level, interpreted, dynamically typed client-side scripting language. While HTML is static and defines the structure of a web page, JavaScript adds interactivity and functionality to HTML elements. This interaction is facilitated through events, which are actions or occurrences
2 min read
How to Add event listener to Button in JavaScript ?
In web development adding an event listener to a button is a common task that allows us to execute JavaScript code in response to user interactions, such as clicks. This helps us to create interactive and flexible web pages. Using addEventListener()The addEventListener method is a versatile and wide
1 min read
How to take user input in JavaScript?
Interacting with users is the best way to create engaging and dynamic web applications. Taking user input allows your applications to be interactive and responsive. Here we will see the approach to take user input in JavaScript, specifically using the prompt method, which is perfect for beginners. A
3 min read
How to trigger HTML button after hitting enter button in textbox using JavaScript ?
In this article, we are given an HTML document containing a text area and the task is to trigger the button when the user hit Enter button. We can do it by using the "keyup", "keydown", or "keypress" event listener on the textbox depending on the need. When this event is triggered, we check if the k
4 min read
JavaScript Detecting the pressed arrow key
Sometimes we need to detect the keys and sometimes even detect which keys were pressed. To detect which arrow key is pressed we can use JavaScript onkeydown event. Detecting the pressed arrow key using onkeydown EventThe DOM onkeydown Event in HTML occurs when a key is pressed by the user. Syntax:ob
2 min read
How to submit a form on Enter button using jQuery ?
Given an HTML form and the task is to submit the form after clicking the 'Enter' button using jQuery. To submit the form using 'Enter' button, we will use jQuery keypress() method and to check the 'Enter' button is pressed or not, we will use 'Enter' button key code value. <!DOCTYPE html> <
2 min read
How to Detect Keypress using JavaScript ?
In this article, keyboard detection is performed using HTML and CSS. HTML stands for "Hypertext Markup Language". HTML language helps the developer to create and design web page elements like links, sections, paragraphs, headings, and blockquotes for web applications. CSS stands for "Cascading Style
2 min read
JavaScript onKeyPress onKeyUp and onKeyDown Events
Whenever a key is pressed or released, there are certain events that are triggered. Each of these events has a different meaning and can be used for implementing certain functionalities depending on the current state and the key that is being used. These events that are triggered when a key is press
2 min read
Build a Virtual Keyboard using HTML CSS & JavaScript
In this article, we will build a virtual keyboard using HTML, CSS, and JavaScript. A virtual keyboard is a user interface component that allows users to input text by clicking on the keys displayed on the screen. Our keyboard will support standard alphanumeric characters, special characters, and a C
4 min read
How to check a button is clicked or not in JavaScript ?
Checking if a button is clicked in JavaScript involves detecting user interactions with the button element. This is typically achieved by adding an event listener, such as onclick or addEventListener(click), which triggers a specific function or action when the button is clicked. There are two metho
2 min read