Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Trigger a Button on Enter Key in JavaScript
To trigger a button on the Enter key in JavaScript, you can do it by using JavaScript keyboard events. Keyboard interactions are very essential in web development, and developers must use them effectively for a better user experience.
This is especially helpful for forms, search boxes, and places where you enter information. In this article, we will explore different ways to detect and handle the ENTER key press event in JavaScript.
To trigger a button on enter key in JavaScript, you can do it the following ways:
Using Keyup Event
The keyup event fires when a key is released. This makes sure that the button only activates after the key has been completely pressed down and then released.
Example
The following is a simple example of triggering a button on releasing an enter key using keyup event.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample,
.result {
font-size: 18px;
font-weight: 500;
color: red;
}
.result {
color: blueviolet;
}
</style>
</head>
<body>
<h1>Trigger a button on ENTER key</h1>
Enter text<input type="text" class="sample" />
<button class="Btn">CLICK HERE</button>
<div class="result"></div>
<h3>
Press enter in the above text field to trigger the button
</h3>
<script>
let resultEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
sampleEle.addEventListener("keyup", (event) => {
if (event.keyCode === 13) {
event.preventDefault();
document.querySelector(".Btn").click();
}
});
document.querySelector(".Btn").addEventListener("click", () => {
resultEle.innerHTML ="Button has been clicked and text = " + sampleEle.value;
});
</script>
</body>
</html>
Output
Using Keydown Event
The keydown event triggers when you press a key. We can use this event to see if the ENTER key is pressed and then make the button click as needed.
Example
The following is a simple example of triggering a button on pressing down an enter key using keydown event.
<!DOCTYPE html>
<html>
<head>
<title>Keydown Enter Demo</title>
<style>
body { font-family: sans-serif; max-width: 400px; margin: 20px auto; }
input { padding: 6px; width: 70%; }
button { padding: 6px 12px; }
#result { margin-top: 10px; color: #3a3a3a; }
</style>
</head>
<body>
<h3>Keydown Example</h3>
<input id="input" placeholder="Type and press Enter">
<button id="btn">Submit</button>
<div id="result"></div>
<script>
const input = document.getElementById('input');
const btn = document.getElementById('btn');
const result = document.getElementById('result');
input.addEventListener('keydown', function(event) {
if (event.keyCode === 13) {
event.preventDefault();
btn.click();
}
});
btn.addEventListener('click', function() {
result.textContent = "Submitted: " + input.value;
});
</script>
</body>
</html>
Output
Using Keypress Event
The keypress event triggers when you press a key, but it's no longer recommended for use. Still, it can be helpful for older browsers.
Example
The following is a simple example of triggering a button on pressing an enter key using keypress event.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keypress Demo</title>
<style>
body { font-family: sans-serif; max-width: 400px; margin: 20px auto; }
input { padding: 6px; width: 70%; }
button { padding: 6px 12px; }
#result { margin-top: 10px; color: #3a3a3a; }
</style>
</head>
<body>
<h3>Keypress Example</h3>
<input id="input" placeholder="Type and press Enter">
<button id="btn">Submit</button>
<div id="result"></div>
<script>
const input = document.getElementById('input');
const btn = document.getElementById('btn');
const result = document.getElementById('result');
input.addEventListener('keypress', function(event) {
if (event.keyCode === 13) {
event.preventDefault();
btn.click();
}
});
btn.addEventListener('click', function() {
result.textContent = "Submitted: " + input.value;
});
</script>
</body>
</html>
Output
Conclusion
In this article, we have seen three simple keyboard interactions such as keyup(), keydown(), keypress() to trigger a button on enter key. This all are simple and efficient way to do this.
1K+ Views
