Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 addEventListner() method. After that, we check the keycode of the key pressed. If keyCode is equal to 13, the enter key is pressed.
Example 1
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 addEventListner() method on the input field. We have added the keypress event in the addEventListner() 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>
Example 2
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 addEventListner() 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>
Example 3
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 addEventListner() 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 submited!";
})
input.addEventListener("keydown", function (event) {
if (event.keyCode == 13) {
input.value = "";
output.innerHTML = "<br>Input value submited!";
alert("Button code executed.");
}
});
</script>
</html>
Developers learned to use the enter key to submit the input values or form. We can use keypress, keydown, or keyup any event to trigger a form submission by pressing enter. All three events will trigger whenever users press any key, so we need to check the value of the keyCode attribute to ensure that users press enter.
4K+ Views
