Autotab: plugin de jQuery para auto-tabulación y filtrado de campos

0 COMENTARIOS - Publicado hace 13 meses - Clasificado en: JQUERY, TUTORIALES, TIPS

Autotab jQuery es un plugin que ofrece auto-tabulación y filtrado en los campos de texto en un formulario. Una vez que el número máximo de caracteres se ha alcanzado dentro de un campo de texto, el foco se ajusta automáticamente al campo destino definido previamente.

Las propiedades que soporta son:

format
El método de filtrado del campo de texto. Las opciones de filtrado disponibles son: text, alpha, numeric, number (lo mismo que numeric), alphanumeric, y all (por defecto).
maxlength
Determina el número máximo de caracteres permitidos en un campo de texto. Pasando maxlength al plugin se sobrescribirá el atributo maxlength codificado en el código HTML.
uppercase
Convierte cualquier texto a mayúsculas.
lowercase
Convierte cualquier texto a minúsculas.
NoSpace
Elimina los espacios.
meta
El campo de texto al que pasará el foco automáticamente cuando el maxlength se haya cumplido en el actual campo de texto.
previous
El campo de texto al que pasará el foco automáticamente cuando pulsemos la tecla de retroceso -BackSpace- en un campo de texto vacío. También puede pulsar la tecla de retroceso para seguir la auto-tabulación a la inversa.

Supongamos que deseamos recoger la cuenta bancaria mediante un formulario. El ejemplo de uso sería:

1.- Incluimos tanto jQuery como el plugin

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.autotab.js"></script>

2.- Realizamos el formulario. Importante especificar los id pertinentes y el atributo maxlength para no tenerlo que especificar posteriormente en el script.

<form name="Autotab" action="#" method="post" >
<strong>Cuenta Bancaria</strong> 
<input name="banco" id="banco" type="text" size="4" maxlength="4"> -
<input name="oficina"  id="oficina" type="text" size="4" maxlength="4"> -
<input name="digitocontrol" id="digitocontrol" type="text" size="2" maxlength="2"> - 
<input name="cuenta"  id="cuenta" type="text" size="10" maxlength="10">
</form>

3.- Especificamos los saltos y restringimos la introducción en los campos a números. También podemos especificar la propiedad "previous" para facilitar el borrado y que de un campo se pueda ir al anterior.

<script type="text/javascript">
$(document).ready(function() {
$('#banco').autotab({ target: 'oficina', format: 'numeric' });
$('#oficina').autotab({ target: 'digitocontrol', format: 'numeric', previous: 'banco' });
$('#digitocontrol').autotab({ target: 'cuenta', format: 'numeric', previous: 'oficina' });
$('#cuenta').autotab({ previous: 'digitocontrol', format: 'numeric' });
});
</script>

Ver ejemplo en funcionamiento » »

Autotab » »

Algunas entradas relacionadas: