<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<div>
Nombre: <input type="text" name="nombre">
</div>
<div>
Apellidos: <input type="text" name="apellidos">
</div>
<div>
Selecciona: <select name="sistema">
<option>Selecciona</option>
<option>Opcion 1</option>
<option>Opcion 2</option>
</select>
</div>
<div>
Código: <input type="text" name="codigo" data-lengthMin="4" maxlength="4"> (4 caracteres)
</div>
<input type="submit" value="Enviar">
</form>
</body>
</html>
<script>
const elementos = Array.from(document.querySelectorAll("input, select"));elementos.forEach(el => el.addEventListener("keyup", mover));
function mover(e) { if (e.keyCode==40) { // bajar (elementos[obtenerIndiceElemento(this)+1] || elementos[0]).focus();
e.preventDefault();
} else if (e.keyCode==38) { // subir (elementos[obtenerIndiceElemento(this)-1] || elementos[elementos.length-1]).focus();
e.preventDefault();
}
}
const obtenerIndiceElemento = elemento => elementos.findIndex(el => el==elemento);
</script>
Crear cuenta
Comentarios sobre la versión: Versión 1.0 (0)
No hay comentarios