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
How to trigger the HTML button after hitting enter button in the textbox using JavaScript?
Generally, developers add the submit button to submit the input field's text. However, if they allow users to submit the input value by pressing enter, it improves the UX of the application.
Here, we will learn the general way to detect the key press using the key listener event. Afterwards, we can perform any operation whenever the user presses the enter key button.
Syntax
Users can follow the syntax below to detect whenever the user presses the enter key.
input.addEventListener("keypress", function (event) {
if (event.keyCode == 13) {
// enter pressed
}
});
In the above syntax, we have added the event listener to the input. Whenever the user presses any key, it will trigger the callback function of the addEventListener() method. After that, we check the keycode of the key pressed. If keyCode is equal to 13, the enter key is pressed.
Using keypress Event
In the example below, we have created the input field. Also, we have created the submit button, which invokes the submitInput() function and clears the input field.
Also, we have accessed the input by id in JavaScript and added the addEventListener() method on the input field. We have added the keypress event in the addEventListener() method.
The event.keyCode returns the code for the key pressed, and if it is equal to the 13, it means users have pressed the enter key, and we need to submit the input value.
<html>
<body>
<h3> Using the <i> KeyPress </i> event to detect whenever user presses the enter. </h3>
<p> Enter some text in the text box below and hit enter button </p>
<input type = "text" id = "text_input">
<br> <br>
<button type = "submit" onclick = "submitInput()"> Submit </button>
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
let input = document.getElementById('text_input');
// function for submitInput button
function submitInput() {
input.value = "";
output.innerHTML += "Input value submitted!";
}
// function to detect keypress event
input.addEventListener("keypress", function (event) {
// detect event key
if (event.keyCode == 13) {
input.value = "";
output.innerHTML += "<br>Input value submitted!";
alert("Button code executed.");
}
});
</script>
</html>
Using keydown Event
In the example below, we have used the keydown event to detect if users have pressed any key. Whenever the user presses any key, it triggers the keydown event, and after that, we can ensure that users have pressed enter key using the value of keyCode.
We invoke the submitInput() function whenever the user presses the enter key rather than handling the submit input value in the addEventListener() method's callback function.
<html>
<body>
<h3> Using the <i> Keydown </i> event to detect whenever user presses the enter. </h3>
<p> Enter some text in the text box below and hit enter button </p>
<input type = "text" id = "text_input">
<br> <br>
<button type = "submit" onclick = "submitInput()"> Submit </button>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let input = document.getElementById('text_input');
// function for submitInput button
function submitInput() {
input.value = "";
output.innerHTML += "<br>Input value submitted!";
alert("Button code executed.");
}
// function to detect keypress event
input.addEventListener("keydown", function (event) {
// detect event key
if (event.keyCode == 13) {
submitInput();
}
});
</script>
</body>
</html>
Using keyup Event
In the example below, we have used the 'keyup' event, which triggers when users release any key after pressing. Also, we have added click event listener on the button using the addEventListener() method.
<html>
<body>
<h3> Using the <i> Keyup </i> event to detect whenever user presses the enter</h3>
<p> Enter some text in the text box below and hit enter button </p>
<input type = "text" id = "text_input">
<br> <br>
<button type = "submit" id = "btn"> Submit </button>
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
let input = document.getElementById('text_input');
let btn = document.getElementById('btn');
btn.addEventListener('click', function () {
input.value = "";
output.innerHTML = "Input value submitted!";
})
input.addEventListener("keyup", function (event) {
if (event.keyCode == 13) {
input.value = "";
output.innerHTML = "<br>Input value submitted!";
alert("Button code executed.");
}
});
</script>
</html>
Modern Approach Using event.key
While keyCode works, the modern approach uses event.key for better readability and cross-browser compatibility:
<html>
<body>
<h3> Using event.key for modern browser compatibility </h3>
<p> Enter some text and press Enter </p>
<input type = "text" id = "modern_input">
<br> <br>
<button id = "modern_btn"> Submit </button>
<div id = "modern_output"> </div>
<script>
let modernOutput = document.getElementById('modern_output');
let modernInput = document.getElementById('modern_input');
let modernBtn = document.getElementById('modern_btn');
function handleSubmit() {
modernOutput.innerHTML = "Submitted: " + modernInput.value;
modernInput.value = "";
}
modernBtn.addEventListener('click', handleSubmit);
modernInput.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
handleSubmit();
}
});
</script>
</body>
</html>
Comparison
| Event Type | Trigger Timing | Best For |
|---|---|---|
| keypress | Key is pressed down | Character input detection |
| keydown | Key starts being pressed | All keys including special keys |
| keyup | Key is released | After complete key action |
Conclusion
You can use keypress, keydown, or keyup events to trigger form submission by pressing enter. The modern approach uses event.key === "Enter" instead of keyCode == 13 for better compatibility and readability.
6K+ Views
