November 21, 2021

How to Disable Enter Key in Textarea in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to disable enter key in textarea in javascript. In a standard keyboard layout, the enter key is located just above the shift key. Depending upon the operation, it can be used alone or with a combination of other keys.

To create an input field in the HTML, we make use of the input element and textarea element. The textarea element is used whenever you are expecting a multiline input field. As soon as you press enter key while typing in the textarea element, the cursor pointer will be moved to the beginning of the next line.

There are multiple ways to avoid such behavior, but we will go with the simplest approach. Whenever we press a key on the keyboard, certain keyboard events are triggered. The event object contains methods and properties which provide us the complete details about the keyboard event.

To keep things simple, we are going to monitor keydown event and in the event handler function, we will verify whether an enter key is pressed or not using the key property of the event object. To avoid the default behavior of the enter key, we will use preventDefault() method.

In the following example, we have an input field. As soon as the user presses an enter key while typing in the input field, we will prevent it from moving to the next line. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, h1, and textarea).
The div element is just a wrapper for the rest of the elements. We are using style attribute with div element to center align the child elements.
The innerText for the h1 element is “Result”.
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">
    <title>Document</title>
</head>
<body>
      
    <div style="text-align: center">
        <textarea cols="50" rows="5" placeholder="Enter Text"></textarea>
        <h1>Result</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

Javascript

We have selected the textarea element and h1 element using document.querySelector() method and stored them in the input and result variables respectively.
We have attached keydown event listener to the textarea element.
In the event handler function, we are using if statement and key property of the event object to verify whether enter key is pressed or not.
If yes, we will show “Enter Key Disabled” in the h1 element using the innerText property and also call preventDefault() method to prevent the default behavior.
If no, we will show “Result” in the h1 element which is the default innerText.

let input = document.querySelector("textarea");
let result = document.querySelector("h1");

input.addEventListener("keydown", (e) => {
  if (e.key == "Enter") {
    result.innerText = "Enter Key Disabled";
    e.preventDefault();
  } else {
    result.innerText = "Result";
  }
});

You May Also Like: