Les dejo una función que acabo de escribir para controlar el cursor en un formulario, básicamente en cada control del form se debe llamar a la función controladora que es la encargada de cambiar el foco al control anterior ó siguiente... hasta aquí todo bonito, salvo que no siempre funciona como debiera
Código:
function cambiarFoco(ctrl, idAnt, idSig)
{
// extrae el codigo de la tecla presionada
var e = window.event;
var cod = (e.keyCode) ? e.keyCode : e.which;
// comprueba se haya presionado una tecla capturable que mueva el foco a otro control
if (cod!=9) return true;
// decide si el cambio de foco es automático (1 parámetro) o si se utilizaran IDs de destino (3 parámetros)
var auto = (arguments.lengt==1) ? true : false;
if (!auto) {
// determina si se mueve hacia adelante o hacia atrás
if (e.shiftKey) {
// accede al control anterior
var ant = document.getElementById(idAnt);
// comprueba si puede recibir el foco
if (ant.disabled==true || ant.type=='hidden' || ant.style.visibility=='hidden' || ant.style.display=='none') {
// le pasa el foco al control anterior
ant.onkeydown();
}
else {
// le pasa el foco al control
ant.focus();
}
}
else {
// accede al siguiente control
var sig = document.getElementById(idSig);
// comprueba si puede recibir el foco
if (sig.disabled==true || sig.type=='hidden' || sig.style.visibility=='hidden' || sig.style.display=='none') {
// le pasa el foco al siguiente control
sig.onkeydown();
}
else {
// le pasa el foco al control
sig.focus();
}
}
}
return false;
}
y les dejo una página de prueba:
Código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script language="JavaScript" type="text/javascript" src="forms.js"></script>
</head>
<body>nombre:*<input type="text" id="nombre" name="nombre" onKeyDown="return cambiarFoco(this,'ok','apellido');">
teléfono: <input type="text" id="telfax" name="telfax" onKeyDown="return cambiarFoco(this,'apellido','calle');"><br><br>
apellido:*
<input type="checkbox" onclick="document.getElementById('apellido').disabled = this.checked;"><input type="text" id="apellido" name="apellido" onKeyDown="return cambiarFoco(this,'nombre','telfax');"><br><br>
calle:* <input type="text" id="calle" name="calle" onKeyDown="cambiarFoco(this,'telfax','nrocalle')"> nro: <input type="text" id="nrocalle" name="nrocalle" onKeyDown="return cambiarFoco(this,'calle','ok');">
<br>
<br>
<input type="button" value="button" id="ok" name="ok" onclick="alert('hola!');" " onKeyDown="return cambiarFoco(this,'nroCalle','nombre');">
</body>
</html> Tips:
- estoy usando el evento onKeyDown para poder cancelar al efecto normal de la tecla TAB (devolviendo false)
- al presionar Tab se debiera saltar al siguiente
- al presionar Shift+Tab se invierte el orden y debiera saltar al anterior
- si el control destino esta oculto o deshabilitado se lo debería ignorar
Bueno, eso es todo... si alguien me ayuda a depurarle los errores se lo agradeceré
saludos!