viernes, 20 de agosto de 2010

JQuery: Limitando la entrada de carácteres en los input[type=text]

Hay veces en la que queremos que en una caja de texto sólo podamos ingresar ciertos carácteres, por ejemplo una caja de texto donde sólo puedo escribir números.

Con este plugin de jquery, podemos realizar la tarea de manera sencilla: ver demo

Para usar el plugin usamos el método filter_input
$(function(){
//Limita la entrada en la caja de texto a los carácteres que pasen la expresión regular.
$('#numbers').filter_input({regex:'[02468]'});​
});
La url del plugin es: http://www.thimbleopensource.com/tutorials-snippets/jquery-plugin-filter-text-input

JQuery: Usando Máscaras en los input[type=text]

Las máscaras de texto limitan el contenido que puede ser entrado en una caja de texto y aplica formato al mismo tiempo al contenido.

El demo muestra una máscara que sólo permite incluir números seis números y dos números decimales.

El plugin usado para fectuar este demo es: http://digitalbush.com/projects/masked-input-plugin/

El código javascript para aplicar la máscara es sencillo:

$(function(){
//Uamos la función para seleccionar nodos de jquery y usamos el plugin mask.
$('#numero').mask('999999.99')​;
});
El formato de las máscara es sencillo:
  • a Representa carácteres alfabéticos
  • 9 Representa carácteres numéricos
  • * Representa carácteres alfabéticos y numéricos
Es posible configurar un evento con este plugin que se activa cuando la entrada de los datos ha completado la máscara configurada para la caja de texto:

$(function(){
//Uamos la función para seleccionar nodos de jquery y usamos el plugin mask.
$('#numero').mask('999999.99', {completed: function(){ alert("Mascara completada, valor ingreado: " + this.val()); }})​;
});