August 19, 2021

How to Trigger Button Click on Enter Key Press Using Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to trigger button click on enter key press using javascript. This is something where you need to put a little extra effort to accomplish. We have a bunch of keys in our keyboards but Enter key has its significance.

It is a very common convention to provide your users with the ability to submit any sort of form data as soon as they click on the button or press Enter key on their keyboard. Such a thing will happen implicitly if you are using submit button within the form element.

If you are not using the form element, then you might end up looking for alternate solutions. In this tutorial, we are going to cover one of those alternate solutions. As you know, whenever a user interacts with the keyboard, certain events are triggered and the keypress event is one of them.

We are going to using keypress event to detect keyboard interaction as well as make use of event object to detect which key is pressed by the user.

In the following example, we are going to type some text in the input field and when we press Enter key, we will take that text and display it on the screen. We will do it first by clicking a button and later we will trigger this button click after Enter keypress. Please have a look over the code example and steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, input, button, and h1). The div element is just a wrapper for the rest of the elements.
The inner text for the button element is “Get” and for the h1 element is “Your Text”.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>

  <div>
    <input type="text" placeholder="Type here...">
    <button>GET</button>
    <h1>Your Text</h1>
  </div>

  <script src="script.js"></script>
</body>

</html>

div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

button, input {
    padding: 10px 20px;
    margin-top: 10px;
}

Javascript

We have select 3 elements input, button, and h1 using document.querySelector() and stored them in inputEl, btnGet, and display variables respectively.
We have attached the click event listener to the button element.
In the click event handler function, we are simply getting value from the input element and setting it as the inner text of the h1 element.
We have attached the keypress event listener to the input element. The first parameter of the event handler function is an event object which provides information about the event.
In the keypress event handler function, we are using the key property of the event object and checking whether the key pressed by the user is Enter key. If yes, then we will execute the click() method of the button element to trigger click.

let inputEl = document.querySelector("input");
let btnGet = document.querySelector("button");
let display = document.querySelector("h1");

btnGet.addEventListener("click", () => {
  display.innerText = inputEl.value;
});

inputEl.addEventListener("keypress", (e) => {
  if (e.key == "Enter") btnGet.click();
});

You May Also Like: