JavaScript - Recorrer inputs por medio de las flechas del teclado

 
Vista:
Imágen de perfil de ScriptShow
Val: 2.084
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Recorrer inputs por medio de las flechas del teclado

Publicado por ScriptShow (663 intervenciones) el 26/01/2019 11:08:16
Un script básico que sirve para desplazar el focus entre varios inputs por medio de las flechas del teclado...
Hemos identificado los inputs por ID con números; esto simplifica el manejo de los elementos, basándonos en el DOM, compatible con todos los Navegadores Web.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
 
<html>
<body>
<input type="text" id="1" onclick="test(1)">
<input type="text" id="2" onclick="test(2)">
<input type="text" id="3" onclick="test(3)">
<input type="text" id="4" onclick="test(4)">
 
<script type="text/javascript">
<!--
var s, p=1;

function test(s) {
d=document.getElementById(s);
d.focus();
p=s;
}

function next() {
if (p < 4) {p++; test(p)}
}

function prev() {
if (p > 1) {p--; test(p)}
}

document.onkeydown=function(e) {
e = e || window.event;
if (e.keyCode == 37) {prev()}
if (e.keyCode == 39) {next()}
return;
}

test(p);
//-->
</script>
</body>
</html>

Forma parte de un ejercicio que fue planteado en el Chat de LWP. Finalmente, publicarlo en este Foro, puede ser de utilidad a otros usuarios.

Un saludo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
1
Responder
Imágen de perfil de xve
Val: 2.985
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Recorrer inputs por medio de las flechas del teclado

Publicado por xve (2096 intervenciones) el 26/01/2019 21:40:02
Muy bueno ScriptShow!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar