En esta entrada vamos a jugar un poco con jquery, 
lo que queremos lograr es restringir los caracteres que se pueden escribir en una caja de texto. El punto es evitar complicadas validaciones, ejemplo: si necesitamos un campo que solo puede ser numérico ¿para qué dejar escribir letras? o viceversa.
Este plugin nos proporciona el evento keypress para lograr nuestro objetivo, este evento tiene lugar cuando el navegador registra la pulsación de una tecla. Si el usuario mantiene la tecla presionada, se producen eventos de pulsación por cada carácter insertado.
Para determinar que carácter fue presionado, mostros podemos examinar el objeto que se pasa a la función que controla el evento.
¿Pero como se, que carácter fue presionado?
JQuery normaliza esto con el atributo .which, nosotros podemos usarlo para recuperar el código de los caracteres. El método preventDefault() detiene el proceso de captura.
El siguiente script define algunos métodos para controlar algunas posibles restricciones en el texto a ingresar en las cajas de texto.
sjorrillo = {
//------------------------------------------------------
//Variables
//------------------------------------------------------
//Número de decimales en la caja de texto.
NumeroDeDecimales: "3",
//------------------------------------------------------
//Métodos
//------------------------------------------------------
// Permite solo ingresar enteros
EnterosHandled: function(e) {
if (e.which >= 48 & e.which <= 57 | e.which == 8) {
return true;
}
else {
e.preventDefault();
}
},
// Permite ingresar decimales
DecimalesHandled: function(e, text) {
var decimales = 0;
if (sjorrillo.ContarPuntos(text) > 0) {
decimales = sjorrillo.CantidadDecimales(text);
}
if (e.which >= 48 & e.which <= 57 &
decimales < sjorrillo.NumeroDeDecimales | e.which == 8) {
return true;
}
else {
if (text != "" & e.which == 46 & sjorrillo.ContarPuntos(text) == 0)
return true;
else {
e.preventDefault();
}
}
},
//Permite ingresar solo texto.
SoloTextoHandled: function(e) {
if ((e.which >= 97 & e.which <= 122) | (e.which >= 65 & e.which <= 90) |
e.which == 32 | e.which == 8) {
return true;
}
else {
e.preventDefault();
}
},
//Permite ingresar solo alfanumericos.
AlfanumericoHandled: function(e) {
if ((e.which >= 48 & e.which <= 57) | (e.which >= 97 & e.which <= 122) |
(e.which >= 65 & e.which <= 90) | e.which == 32 | e.which == 8) {
return true;
}
else {
e.preventDefault();
}
},
//Cuenta el número de puntos en una cadena.
ContarPuntos: function(input) {
var cant = 0;
if (input != null) {
for (var i = 0; i < input.length; i++) {
if (input[i] == '.')
cant += 1;
}
}
return cant;
},
//Cuenta el número de dígitos después de un punto.
CantidadDecimales: function(input) {
var cant = 0;
if (input.indexOf(".") != -1)
cant = input.substr(input.indexOf(".") + 1).length;
return cant;
},
};
En el código de arriba se comentan cada uno de los métodos y propiedades del script, es de fácil comprensión, bueno ahora a la práctica.
La idea de este script es tenerlo en un archivo a parte (sjorrillo.utils.js) y referenciarlo cada vez que queramos. Previamente referenciando a jquery.
Ejemplos:
En los siguientes ejemplos nosotros tenemos una caja de texto con el id cajita.
Permitir números.
$("#cajita").keypress(function(e) { sjorrillo.EnterosHandled(e); });
Permitir solo letras.
$("#cajita").keypress(function(e) { sjorrillo.SoloTextoHandled(e); });
Permitir números y letras.
$("#cajita").keypress(function(e) { sjorrillo.AlfanumericoHandled(e); });
Permitir el ingreso de decimales, cabe resaltar que en este método nosotros pasamos también el propio contenido de la caja de texto, puesto que un número decimal solo tiene una parte decimal y también podemos definir la cantidad de números después de la parte decimal, que por defecto es 3.
sjorrillo.NumeroDeDecimales = 2;
$("#cajita").keypress(function(e) { sjorrillo.DecimalesHandled(e, $(this).val()); });
Esto es todo por hoy disfrútenlo 