by Sai gowtham

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.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
130,921 students enrolled
48.5 hours of video content
View Course