November 24, 2021

How to Disable Tab Key in Textarea in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to disable tab key in textarea in javascript. In a standard keyboard layout, the Tab key is located just above the Caps Lock 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 Tab key while typing in the textarea element, the cursor pointer will be moved to the next tab stop.

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 listen to the keydown event and in the event handler function, we will verify whether the Tab key is pressed or not. We are also going to use the preventDefault() method to prevent the default behavior.

In the following example, we have an input field. As soon as the user presses Tab key while typing in the input field, we will prevent it from moving to the next tab stop. 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 the keydown event listener to the textarea element.
In the event handler function, we are using the if statement and key property of the event object to verify whether the Tab key is pressed or not.
If yes, we will show “Tab Key Disabled” in the h1 element using the innerText property and also call the 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 == "Tab") {
    result.innerText = "Tab Key Disabled";
    e.preventDefault();
  } else {
    result.innerText = "Result";
  }
});

You May Also Like: