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.

   
 Using the  KeyPress  event to detect whenever user presses the enter. 
   
 Enter some text in the text box below and hit enter button 
   
   
 

    Submit 
   
 

   

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.

   
      
 Using the  Keydown  event to detect whenever user presses the enter. 
      
 Enter some text in the text box below and hit enter button 
      
      
 

       Submit 
      
 
      
   

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.

   
 Using the  Keyup  event to detect whenever user presses the enter
   
 Enter some text in the text box below and hit enter button 
   
   
 

    Submit 
   
 

   

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.