How to disable arrow key in textarea using JavaScript ? Last Updated : 23 Jan, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report Given an HTML element containing the <textarea> element and the task is to disable scrolling through arrow keys with the help of JavaScript. Approach 1: Add an event listener onkeydown on the window.If the event happens then check if the keys are arrow or not.If arrow key is pressed then prevent its default behaviour. Example: This example implements the above approach. html <h1 style="color:green;"> GeeksforGeeks </h1> <p id="GFG_UP"> </p> <textarea id="t"> JavaScript was once upon a time used only in client side(browser), but node js (execution engine/run time/web server) have made possible to run javascript on server side. JavaScript has stormed the web technology and nowadays small software ventures to fortune 500, all are using node js for web apps. </textarea> <br> <button onclick="gfg_Run()"> click here </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "Click on the button to disable" + " scrolling through arrow keys."; function gfg_Run() { window.addEventListener("keydown", function(e) { if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1){ e.preventDefault(); } }, false); el_down.innerHTML = "Scrolling from arrow keys is disabled."; } </script> Output: How to disable arrow key in textarea using JavaScript ? Approach 2: This example is quite similar to the previous one. It also maintains an array of which keys are pressed and when keyup event happens it removes them from array.Add a event listener onkeydown on the window.If the event happens then check if the keys are arrow or not.If arrow key is pressed then prevent its default behaviour. Example: This example implements the above approach. html <h1 style="color:green;"> GeeksforGeeks </h1> <p id="GFG_UP"> </p> <textarea id="t"> JavaScript was once upon a time used only in client side(browser), but node js (execution engine/run time/web server) have made possible to run javascript on server side. JavaScript has stormed the web technology and nowadays small software ventures to fortune 500, all are using node js for web apps. </textarea> <br> <button onclick="gfg_Run()"> click here </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "Click on the button to disable" + " scrolling through arrow keys."; function gfg_Run() { var key = {}; window.addEventListener("keydown", function(e) { key[e.keyCode] = true; switch(e.keyCode){ case 37: case 39: case 38: case 40: case 32: e.preventDefault(); break; default: break; } }, false); window.addEventListener('keyup', function(e){ key[e.keyCode] = false; }, false); el_down.innerHTML = "Scrolling from arrow keys is disabled."; } </script> Output: How to disable arrow key in textarea using JavaScript ? Comment More infoAdvertise with us Next Article How to Detect Keypress using JavaScript ? P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Disable Textarea using JavaScript? This article will show you how to disable the textarea using JavaScript. Disabling a textarea using JavaScript can be done by setting the disabled property of the textarea element to true. This prevents the user from editing the content of the textarea. There are some reasons to use disabled textare 2 min read How to create auto-resize textarea using JavaScript/jQuery ? Creating an auto-resize textarea using JavaScript or jQuery means dynamically adjusting the height of the textarea to fit its content as the user types. This enhances user experience by preventing the need for scrolling within the textarea, ensuring all content is visible.Table of ContentUsing JavaS 3 min read How to Disable Ctrl+V (Paste) in JavaScript? What is Ctrl + V ?The ctrl+V is a keyboard shortcut used to paste anything from anywhere. It can be disabled for a particular task or page. Let's see how to disable cut, copy, paste, and right-click. To disable the ctrl+V (paste) keyboard shortcut in JavaScript, you would typically capture the keydo 3 min read How to Add Text Formatting to a Textarea using JavaScript? To add text formatting (such as bold, italic, or inserting special characters) to a <textarea> using JavaScript, you can manipulate the selected text or insert formatted text at the cursor position. This can be done by directly modifying the value of the <textarea> based on user interact 3 min read How to Detect Keypress using JavaScript ? In this article, keyboard detection is performed using HTML and CSS. HTML stands for "Hypertext Markup Language". HTML language helps the developer to create and design web page elements like links, sections, paragraphs, headings, and blockquotes for web applications. CSS stands for "Cascading Style 2 min read How to make a key fire when key is pressed using JavaScript ? In JavaScript, holding down a key will fire the key continuously until it is released. This behavior may be used in applications such as games where a key may be expected to fire only once even after being held down. This can be achieved using two methods: Method 1: Using a flag variable to check th 3 min read Like