Dado un elemento HTML que contiene el elemento <textarea> y la tarea es deshabilitar el desplazamiento a través de las teclas de flecha con la ayuda de JavaScript.
Enfoque 1:
- Agregue un detector de eventos al presionar la tecla hacia abajo en la ventana.
- Si ocurre el evento, compruebe si las teclas son de flecha o no.
- Si se presiona la tecla de flecha, evita su comportamiento predeterminado.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to disable arrow key in
textarea using JavaScript ?
</title>
<style>
#t {
height: 100px;
width: 300px;
background: green;
color: white;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksforGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</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>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Este ejemplo es bastante similar al anterior. También mantiene una array de las teclas que se presionan y cuando ocurre un evento keyup, las elimina de la array.
- Agregue un detector de eventos al presionar la tecla hacia abajo en la ventana.
- Si ocurre el evento, compruebe si las teclas son de flecha o no.
- Si se presiona la tecla de flecha, evita su comportamiento predeterminado.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to disable arrow key in
textarea using JavaScript ?
</title>
<style>
#t {
height: 100px;
width: 300px;
background: green;
color: white;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksforGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</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>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA