Autotab. Plugin de jQuery para tablulación automática de formularios.
Octubre 27th, 2008 por alwaisonAutotab es un plugin para jQuery que nos permite realizar la tabulación entre los campos de un formulario de contacto automáticamente, además de servir como filtro a la hora de introducir caracteres en el campo.
Su funcionamiento es muy simple: una vez que se han escrito el número máximo de caracteres en el campo de texto, el foco salta automáticamente al siguiente caampo. También incluye un filtro que da formato (mayúsculas o minúsculas) al texto, y que permite configurar que caracteres debemos introducir (númerico, alfabético, etc…)
Su implementación es sencilla:
-
-
// añadimos la llamada al javascript dentro del HEAD
-
<script type="text/javascript" src="jquery.autotab.js"></script>
-
-
// creamos el formulario, estableciendo el tamaño y el número máximo de caracteres permitidos
-
<form>
-
<div><strong>Phone Number:</strong></div>
-
<input type="text" name="area_code" id="area_code" maxlength="3" size="3" /> -
-
<input type="text" name="number1" id="number1" maxlength="3" size="3" /> -
-
<input type="text" name="number2" id="number2" maxlength="4" size="5" />
-
</form>
-
-
// inicializamos el script, definiendo el formato, y los campos anteriores
-
<script type="text/javascript">
-
$(document).ready(function() {
-
$(‘#area_code’).autotab({ target: ‘number1′, format: ‘numeric’ });
-
$(‘#number1′).autotab({ target: ‘number2′, format: ‘numeric’, previous: ‘area_code’ });
-
$(‘#number2′).autotab({ previous: ‘number1′, format: ‘numeric’ });
-
});
-
</script>
-
Descarga, demo y documentación | jQuery-autotab
