November 23, 2021

How to Disable Arrow Keys in Textarea in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to disable arrow keys in textarea in javascript. The textarea element is used for multiline text content which can be easily scrolled up and down using arrow keys. You can also use arrow keys to change cursor position in the textarea element.

Whenever we press an arrow key or any other key on the keyboard, certain keyboard events are triggered. In the event handler function, the event object contains details about the keyboard event. The event object has a key property that can reveal which key has been pressed by the user.

To keep things simple, we are going to monitor the keydown event and in the event handler function, we will verify whether an arrow 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 and two button elements. Upon click of a button, we will disable or enable arrow keys. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, button, br, and textarea). The div element is just a wrapper for the rest of the elements.

We have 2 button elements with an innerText of “Enable” and “Disable”.
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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
      
    <div>
        <textarea cols="50" rows="5" placeholder="Enter Text"></textarea>
        <br><br>
        <button id="enable">Enable</button>
        <button id="disable">Disable</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

div {
    text-align: center;
}

button {
    padding: 10px 20px;
}

Javascript

We have selected both the button elements and the textarea element using document.querySelector() method and stored them in the enableBtn, disableBtn, and input variables respectively.
We have a global variable disable that is set to false.

We have attached a keydown event listener to the textarea element.
In the event handler function, we are using the switch statement and key property of the event object to execute a certain piece of code only for arrow keys.
We are using the if statement to verify whether disable is set to true or false. If true, we are calling the preventDefault() method to prevent the default behavior.

We have attached a click event listener to both button elements.
In the event handler function of enable button, we are setting disable to false.
In the event handler function of disable button, we are setting disable to true.

let input = document.querySelector("textarea");
let enableBtn = document.querySelector("#enable");
let disableBtn = document.querySelector("#disable");

let disable = false;

input.addEventListener("keydown", (e) => {
  switch (e.key) {
    case "ArrowLeft":
    case "ArrowRight":
    case "ArrowUp":
    case "ArrowDown":
      if (disable) e.preventDefault();
      break;
  }
});

enableBtn.addEventListener("click", () => (disable = false));
disableBtn.addEventListener("click", () => (disable = true));

You May Also Like: