How to trigger button click on Enter key press using JavaScript

In this article, we will explore three meaningful methods to trigger a button click with JavaScript on the Enter key in a text box.

Triggering Button Click on Enter Key Press

In this section, we will learn how to trigger a button click when the user presses the Enter key while focused on a text box.

To trigger a button click on Enter key press, we can listen for the keydown event on the text box and check if the pressed key is the Enter key. Here's an example:

<input type="text" id="myInput" placeholder="Type and press Enter">
<button id="myButton">Submit</button>
<script>
 const inputElement = document.getElementById('myInput');
 const buttonElement = document.getElementById('myButton');

 inputElement.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    buttonElement.click();
  }
 });
</script>

Explanation:

1. We create a text input field and a button element.
2. In the JavaScript code, we first select the input element and the button element using their respective IDs.
3. Then we add an event listener to the input element, listening for the keydown event.
4. Inside the event listener, we check if the pressed key is the Enter key (event.key === 'Enter').
5. If the Enter key is pressed, we trigger a click event on the button element using the click() method.

Triggering Button Click on Enter Key Press with Keyboard Event Properties

In this section, we will explore an alternative method to trigger a button click on Enter key press, using the keyboard event properties.

<input type="text" id="myInput" placeholder="Type and press Enter">
<button id="myButton">Submit</button>
<script>
 const inputElement = document.getElementById('myInput');
 const buttonElement = document.getElementById('myButton');

 inputElement.addEventListener('keydown', (event) => {
  if (event.key === 'Enter' || event.keyCode === 13 || event.which === 13) {
    buttonElement.click();
  }
 });
</script>

Explanation:

1. We use the same HTML structure as the previous example.
2. In the JavaScript code, we check for the Enter key press using three different properties: event.key, event.keyCode, and event.which.
3. The event.key property returns the key name, so we check if it's equal to 'Enter'.
4. The event.keyCode and event.which properties return the key code, so we check if it's equal to 13.
5. If any of these conditions are met, we trigger a click event on the button element.

Triggering Button Click on Enter Key Press with Form Submission

In this section, we will learn how to trigger a button click on Enter key press by handling the form submission event.

<form id="myForm">
  <input type="text" id="myInput" placeholder="Type and press Enter">
  <button type="submit" id="myButton">Submit</button>
</form>
<script>
 const formElement = document.getElementById('myForm');
 const inputElement = document.getElementById('myInput');
 const buttonElement = document.getElementById('myButton');

 formElement.addEventListener('submit', (event) => {
   event.preventDefault();
   buttonElement.click();
 });

 inputElement.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    formElement.dispatchEvent(new Event('submit'));
  }
 });
</script>

Explanation:

1. We wrap the input field and the button inside a <form> element.
2. In the JavaScript code, we first select the form element, the input element, and the button element.
3. We add an event listener to the form element, listening for the submit event.
4. Inside the event listener, we call event.preventDefault() to prevent the default form submission behavior.
5. Then we trigger a click event on the button element.