Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
JavaScript Submit textbox on pressing ENTER?
In this article, we will learn to Submit a textbox by pressing ENTER in JavaScript. Submitting a textbox form by pressing the ENTER key is a common requirement in web development, enhancing the user experience by making interactions smoother and more intuitive.
Why Enable Form Submission on ENTER Key Press?
Allowing users to submit a form by pressing the ENTER key is an efficient way to enhance usability and reduce friction in the user interface. Whether you're building a search bar, login form, or any other type of text input, implementing this feature saves time and makes interactions feel more natural.
How to Submit a Textbox Using the ENTER Key in JavaScript
Here's how to enable the submission of a textbox when the ENTER key is pressed:
Set Up Your HTML Form
Create a simple HTML form with a textbox and a submit button.
<form id="myForm">
<input type="text" id="textbox" placeholder="Type something here..." />
<button type="submit">Submit</button>
</form>
Add JavaScript for Key Detection
Use JavaScript to detect when the ENTER key is pressed while the textbox is focused.
// Get the textbox element
const textbox = document.getElementById('textbox');
// Add an event listener for the 'keydown' event
textbox.addEventListener('keydown', function(event) {
// Check if the ENTER key is pressed
if (event.key === 'Enter') {
// Prevent the default action (e.g., new line in a textarea)
event.preventDefault();
// Submit the form
document.getElementById('myForm').submit();
}
});
Complete Example: Submit Textbox on ENTER Key Press
Here's a complete working example that demonstrates form submission when the ENTER key is pressed:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submit Textbox on ENTER Key Press</title>
</head>
<body>
<h2>Submit Textbox on Pressing ENTER</h2>
<form id="myForm">
<input type="text" id="textbox" placeholder="Enter some text and press ENTER..." />
<button type="submit">Submit</button>
</form>
<div id="result"></div>
<script>
const form = document.getElementById('myForm');
const textbox = document.getElementById('textbox');
const result = document.getElementById('result');
textbox.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
event.preventDefault(); // Prevent form submission
if (textbox.value.trim() === '') {
result.innerHTML = '<p style="color: red;">Please enter some text!</p>';
return;
}
result.innerHTML = '<p style="color: green;">Form submitted successfully: ' + textbox.value + '</p>';
textbox.value = ''; // Clear the input
}
});
</script>
</body>
</html>
Alternative Method: Using keyCode Property
You can also use the legacy keyCode property (13 for ENTER key), though event.key is the modern approach:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submit using keyCode</title>
</head>
<body>
<input type="text" id="name" placeholder="Type and press ENTER"/>
<div id="message"></div>
<script>
document.getElementById("name").addEventListener("keydown", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
if (this.value.trim() !== '') {
document.getElementById('message').innerHTML =
'<p style="color: blue;">Submitted successfully: ' + this.value + '</p>';
this.value = '';
} else {
document.getElementById('message').innerHTML =
'<p style="color: red;">Please enter some text first!</p>';
}
}
});
</script>
</body>
</html>
Key Points
- Use
event.key === 'Enter'for modern browsers (recommended) - Use
event.keyCode === 13for legacy support - Always call
event.preventDefault()to prevent default form submission behavior - Validate input before processing the submission
- The keydown event fires before the keyup event
Conclusion
Implementing ENTER key submission enhances user experience by providing a natural way to submit forms. Use event.key === 'Enter' with proper validation for the best results.
3K+ Views
