Buscar este blog

jueves, 8 de diciembre de 2011

TextBox sólo números enteros

Hoy veremos como validar un input de tipo text (aplica también para controles de asp.net) para que acepte sólo números enteros.
Lo primero que hay que hacer es agregar estas dos funciones que detallo a continuación:

Esta función permite validar un numero entero con una expresión regular y que utilizaremos para validar la entrada de datos (onkeypress):


function validarNum(e)
{
    tecla = (document.all) ? e.keyCode : e.which;
    if (tecla == 8) return true;
    patron = /\d/;
    te = String.fromCharCode(tecla);
    return patron.test(te);
}

Esta función la utilizaremos en el evento "onchange" para validar los datos pegados (ctrl v) a nuestro textbox, este evento entrara cuando se pierda el foco del control y exista un cambio, y es ahí cuando validamos si lo introducido es un numero entero valido, si no lo es lo borramos.



function quitaNoNumero(obj)
{
patron = /\d/;
    if (!patron.test(obj.value))
{
obj.value="";
}
}

Estas dos funciones de javascript pueden estar en la propia pagina o en un archivo .js, ya depende de ustedes, aquí les dejo el un ejemplo de como utilizarlas:


<html>
<head>
<script type="text/javascript">
function validarNum(e)
{
    tecla = (document.all) ? e.keyCode : e.which;
    if (tecla == 8) return true;
    patron = /\d/;
    te = String.fromCharCode(tecla);
    return patron.test(te);
}
function quitaNoNumero(obj)
{
patron = /\d/;
    if (!patron.test(obj.value))
{
obj.value="";
}
}
</script>
</head>
<body>
<input type="text" onkeypress = "return validarNum(event)" onchange="quitaNoNumero(this)" />
</body>
</html>

Los comentarios son bien recibidos... hasta la próxima.

-------------------------------------------------
Lo que se puede imaginar ... se puede programar


No hay comentarios:

Publicar un comentario