[Tip][jQuery] Haciendo que el Enter se comporte como Tab

Hace algunos día estaba trabajando con tablas para una Web. Cada fila de la tabla tenía un campo de texto en el que el usuario podía ingresar datos, y resulta que los usuarios querían que la tecla «Enter» se comportara como lo hace la tecla «Tab».

Hay muchas formas de hacer que esto funcione, yo para este caso decidí hacer uso de la librería jQuery. En el lado del servidor utilicé PHP.

Bien, supongamos que construimos la tabla con PHP:

for ($i = 0; $i < $filas; $i++)
{ 	
?><tr>
      <td>Columna1</td>
      <td>Columna2</td>
      <td>Columna3</td>
      <td><input id="txt_<?php echo $i; ?/>" type="text" tabindex="< ?php echo ($i+1); ?>" ></td>
    </tr>
< ?php
}

Notemos dos atributos en el campo de texto, el atributo «id» nos servirá para pasar el foco, y el atributo «tabindex» nos ayudará a saber en que foco estamos cuando, por ejemplo, el usuario de click en una caja de texto no consecutiva.

Asumo que en alguna parte, anterior al código que dibuja la tabla, hemos incluido el archivo de jQuery; al final del archivo que dibuja la tabla, antes de «</body>» escribiremos el siguiente código:

<script language='javascript'>
    var foco = 0;
    $("#txt_0").focus();
    $("#txt_0").select();
 
    for(var z = 0; z < <?php echo $filas; ?>; z++)
    {
	$("#txt_"+z).keydown(procTab);
	$("#txt_"+z).focus(cambiarFoco);
    }
</script>

La variable «foco» nos servirá para almacenar la fila que contiene el foco. las funciones «keydown» y «focus» son provistas por la librería jQuery, y como argumento llevan el nombre de las funciones que son llamadas al ocurrir un evento. Como podéis imaginar, la función «kedown» se lanza cada vez que se presiona una tecla, y la función «focus» es lanzada cada vez que el elemento recibe el foco.
Lo que hace falta es construir las funciones «procTac» y «cambiarFoco». Estas funciones podemos crearlas como script dentro del HTML, o en un archivo aparte e incluirlo en el HTML justo después de la invocación a la librería jQuery. EL código para las funciones sería el siguiente:

function cambiarFoco()
{
	foco = parseInt($(this).attr("tabindex")) - 1;
}
 
function procTab(event)
{
	if(event.keyCode == 13)
	{
		var foc = foco+1;
		$("#txt_"+foc).focus();
		$("#txt_"+foc).select();
 
		return event.keyCode;
	}
}

En la función «cambiarFoco» nos aseguramos de tener siempre el índice correcto del foco, así podemos usarlo en la función «procTab» dentro de los «id» de los elementos para una más rápida ejecución.

Fuente: Rambeck Blog