controlar tabulación

diegoturriaga · #1 (**permalink**) 29/04/2009, 08:39

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!

David · #2 (**permalink**) 29/04/2009, 09:44

Para controlar el orden de tabulación también puedes usar el atributo tabindex:

Código html:

Ver original<input type="text" tabindex="1" name="nombre" />
<input type="text" tabindex="3" name="direccion" />
<input type="text" tabindex="2" name="apellido" />

TonyChile · #3 (**permalink**) 29/04/2009, 10:18

Creo que te estas calentando la cabeza de mas si poder guiar el foco es muy simple tal como dice david el grande solo debes usar el tabindex e indicarle cual es el ordern a seguir

Código asp:

Ver original<body>
nombre:*<input type="text" tabindex="1" id="nombre" name="nombre" >
tel&#233;fono: <input type="text" tabindex="2" id="telfax" name="telfax" ><br><br>
apellido:*
<input type="checkbox" tabindex="3" onclick="document.getElementById('apellido').disabled = this.checked;"><input type="text" id="apellido" name="apellido" ><br><br>
calle:* <input type="text" tabindex="4" id="calle" name="calle"> 
nro: <input type="text"  tabindex="5" id="nrocalle" name="nrocalle">
<br>
<br>
<input type="button" tabindex="6" value="button" id="ok" name="ok" onclick="alert('hola!');">
</body>

Bueno el orden de los tabindex="valor" lo ves tu como queras que vaya

Es mas simple que lo que hiciste

diegoturriaga · #4 (**permalink**) 29/04/2009, 10:48

muchas gracias por la sugerencia... pero no aplica a mi caso

quisiera poder usar también otras teclas para el cambio de foco, ya sea Tab(9), Enter(13), Izquierda(37), Arriba(38), Derecha(39), Abajo(40), etc.

recien lo estoy comenzando pero mi idea es poder pasarle como 4to parámetro un array de teclas (keyCodes) o un string separado por comas (todavía no lo he definido):

<input id="x" onKeyDown="controlarTecla(this, 'anterior', 'siguiente', '9,13')">

se aceptan sugerencias

delfin85 · #5 (**permalink**) 29/04/2009, 11:06

Cita:

Iniciado por diegoturriaga

muchas gracias por la sugerencia... pero no aplica a mi caso

quisiera poder usar también otras teclas para el cambio de foco, ya sea Tab(9), Enter(13), Izquierda(37), Arriba(38), Derecha(39), Abajo(40), etc.

recien lo estoy comenzando pero mi idea es poder pasarle como 4to parámetro un array de teclas (keyCodes) o un string separado por comas (todavía no lo he definido):

<input id="x" onKeyDown="controlarTecla(this, 'anterior', 'siguiente', '9,13')">

se aceptan sugerencias

bueno no c si te sirva pero parami esta de maravilla y creo q es sufciente

en mi aplicacion solo utilizo el tab y el enter y me funciona muy bien
aqui te dejo mi codigo

Código:

function Enter(e,obj){   //#################################################___FUNCION ENTER
tecla=(document.all) ? e.keyCode : e.which; 
if(tecla!=13)  return ;
  frm=obj.form; 
  for(i=0;i<frm.elements.length;i++) 
    if(frm.elements[i]==obj) { 
      if (i==frm.elements.length-1) i=-1; 
      break } 
  frm.elements[i+1].focus(); 
  return false;
 }

y en cada objeto del formulario le pondras en el KeyDown lo siguiente:

Código HTML:

<input type="text" name="nombre" value="xx" size="25" onKeyDown="return Enter(event,this)" />

diegoturriaga · #6 (**permalink**) 29/04/2009, 12:01

gracias! (nuevamente)

se me ocurre otra idea... simular la tecla TAB cuando se recibe(n) otra(s) tecla(s)

con lo anterior, para decidir a donde se cambia el foco, alcanza con setear la propiedad tabIndex tal y como me sugerian al principio

lo único que me falta es hacer que si presiona ENTER (o cualquier otra tecla que se quiera) se simule automáticamente que luego se presionó la tecla TAB...

¿alguna sugerencia para esto último?

diegoturriaga · #7 (**permalink**) 29/04/2009, 15:27

Les dejo lo último...

Código HTML:

<head>
	<script>
		function simularTab(evento, obj, codigo)
		{
			var key = (evento.which) ? evento.which : evento.keyCode;
			for (var i=2; i<arguments.length; ++i) {
				if (arguments[i]==key) {
					try {
					if (evento.which) { evento.which = 9; } else { evento.keyCode = 9; }
					} catch(err) { alert(err.description); }
					obj.onkeyup = function () {
						try {
						if (evento.which) {
							evento.which = key;
						}
						else {
							evento.keyCode = key;
						}
						return true;
						} catch(err) { alert(err.description); }
					}
					return true;
				}
			}
			return true;				
		}
	</script>
</head>
<body>
nombre: <input type="text" id="nombre" name="nombre" tabindex="1" onkeydown="return simularTab(event, this, 13,37,38,39,40)">
teléfono: <input type="text" tabindex="4" id="telfax" name="telfax" onkeydown="return simularTab(event, this, 13,37,38,39,40)"><br><br>
apellido: <input type="checkbox" id="chkapellido" name="chkapellido" tabindex="2" onclick="document.getElementById('apellido').disabled = this.checked;" onkeydown="return simularTab(event, this, 13,37,38,39,40)">
	<input type="text" id="apellido" name="apellido" tabindex="3" onkeydown="return simularTab(event, this, 13,37,38,39,40)"><br><br>
calle: <input type="text" tabindex="5" id="calle" name="calle" onkeydown="return simularTab(event, this, 13,37,38,39,40)">
nro: <input type="text"  tabindex="6" id="nrocalle" name="nrocalle" onkeydown="return simularTab(event, this, 13,37,38,39,40)"><br><br>
<input type="button" tabindex="7" value="button" id="ok" name="ok" onclick="alert('hola!');" onkeydown="return simularTab(event, this, 13,37,38,39,40)">
</body>

En IE6 funciona correctamente, pero en Firefox 3 no

Por otro lado estoy intentando que al final el valor del keyCode sea el original... es decir si es una de las teclas que se quiere cambiar por Tab se hace el cambio de keyCode en el evento mouseDown, el evento keyPress que se ejecuta (o no) lo hace pensando que se trata de la tecla Tab pero al final en el evento mouseUp se deja la tecla original... bueno, eso es la idea, no se si esto es posible pero con intentarlo no se pierde nada

gracias a todos los que prueban con estas cosas locas

saludos!