How to trigger button click on enter key in a text box JavaScript

In this tutorial, we are going to learn about how to trigger the button click when we press on a enter key in the input text box using JavaScript.

Using keyup event

We can trigger a button click in JavaScript by using keyup event and keycode 13.

• The keycode 13 is assigned to the Enter key in keyboard.
• The keyup event is triggered when a user releases a key.

Example:

<input placeholder="name" id="text" />
<button onclick="handleMe()" id="btn">Click me</button>

// getting the button & text box
const btn = document.querySelector('#btn');
const textBox = document.querySelector('#text')

// attaching keyup event to textBox
textBox.addEventListener('keyup',(e)=>{
  e.preventDefault();
   if(e.keyCode === 13){
       btn.click(); // triggering click if `keycode === 13`  }
})

function handleMe(){
  alert('You clicked me')
}

Demo

In this below demo, enter something on the input text box and hit enter you will see an alert message.