Restringir inputs dinámicos para recibir solo números enteros!

ljbautista · #1 (**permalink**) 05/03/2012, 12:14

Hola que tal, pues estoy tratando de restringir unos input para que solo puedan recibir números, encontré una funciona que lo hace mas o menos:

Código Javascript:

Ver originalfunction permite(elEvento, permitidos) {
  // Variables que definen los caracteres permitidos
  var numeros = "0123456789";
  var caracteres = " abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ";
  var numeros_caracteres = numeros + caracteres;
  var teclas_especiales = [8, 37, 39, 46];
  // 8 = BackSpace, 46 = Supr, 37 = flecha izquierda, 39 = flecha derecha
 
 
  // Seleccionar los caracteres a partir del parámetro de la función
  switch(permitidos) {
    case 'num':
      permitidos = numeros;
      break;
    case 'car':
      permitidos = caracteres;
      break;
    case 'num_car':
      permitidos = numeros_caracteres;
      break;
  }
 
  // Obtener la tecla pulsada 
  var evento = elEvento || window.event;
  var codigoCaracter = evento.charCode || evento.keyCode;
  var caracter = String.fromCharCode(codigoCaracter);
 
  // Comprobar si la tecla pulsada es alguna de las teclas especiales
  // (teclas de borrado y flechas horizontales)
  var tecla_especial = false;
  for(var i in teclas_especiales) {
    if(codigoCaracter == teclas_especiales[i]) {
      tecla_especial = true;
      break;
    }
  }
 
  // Comprobar si la tecla pulsada se encuentra en los caracteres permitidos
  // o si es una tecla especial
  return permitidos.indexOf(caracter) != -1 || tecla_especial;
}

La función anterior sirve para recibir solo números, solo caracteres o ambas.

Código HTML:

Ver original// Sólo números
<input type="text" id="texto" onkeypress="return permite(event, 'num')" />
 
// Sólo letras
<input type="text" id="texto" onkeypress="return permite(event, 'car')" />
 
// Sólo letras o números
<input type="text" id="texto" onkeypress="return permite(event, 'num_car')" />

En mi caso solo me interesa le de números, pero tiene un detalle, restringe bien a excepción del punto '.' y el carácter de porcentaje '%' ya ya intente modificarlo pero sigue ignorando esos dos caracteres :S

Lo intente con JQuery, pero el problema es que los inputs que tengo que validar son dinámicos y los ids de los inputs cambian :S

Ojala puedan ayudarme, saludos.

Naahuel · #2 (**permalink**) 05/03/2012, 18:01

Buscando un poco en Google, encontré esta función:

Código Javascript:

Ver original<!--
        function isNumberKey(evt)
        {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
 
         return true;
        }
    //-->

Me gustó por su simpleza. Acá un ejemplo:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <script type="text/javascript">
    <!--
        function isNumberKey(evt)
        {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
 
         return true;
        }
    //-->
    </script>
    
</head>
<body>
<input id="text" name="text" onkeypress="return isNumberKey(this);" />
</body>
</html>

ljbautista · #3 (**permalink**) 07/03/2012, 16:12

Muy bueno Naahuel, lo probe y funciona de maravilla y como bien dices de una gran simpleza xD
Mil gracias ;)