Sólo permitir números en input text HTML

Hola a tod@s! Que tal lechugas!?

El otro día me preguntó un amigo que de que modo podía hacer que, en un input text que tenía, sólo se pudiesen escribir números, porque era para escribir unos precios:

function justNumbers(e)
{
   var keynum = window.event ? window.event.keyCode : e.which;
   if ((keynum == 8) || (keynum == 46))
        return true;

    return /\d/.test(String.fromCharCode(keynum));
}

 

 

La función javascript anterior es lo que salio. También hay que tener en cuenta que en el input tendremos que hacer la llamada:

onkeypress="return justNumbers(event);"

 

 

Para quien no comprenda el código (No esta comentado. Niños no hagáis eso en vuestras casas!!) recogemos el evento (la pulsación de las teclas) y a continuación, si es la tecla return (keynum == 8) o el punto (keynum == 46) las permitimos. Si no es así, ccomprobamos que sea un número y lo permitimos si lo es (todo en el último return).

Espero que también os valga a los demás ^_^.

Y recordad que si quereis contar con nosotros para realizar vuestra página web podeis poneros en contacto con nosotros en:

www.freshware.es

Saludos!!

19 comentarios en “Sólo permitir números en input text HTML

  • Hola!
    Y si además quieres que: en una celda sólo se acepten números (logrado está con tu blog). Pero el número que esté en esa celda (son el número de unidades de un producto), quiero que lo multiplique por el precio unitario y aparezca en otra celda.
    Cómo combinar en el script estas dos operaciones:
    1. – if….. que compruebe que es un número
    2. – … que haga la multiplicación.
    Tengo esto:

    function justNumbers(e, field)
    {
    var keynum = window.event ? window.event.keyCode : e.which;
    if ((keynum == 8) || (keynum == 46)) {
    calculo(field.value,precio20090.value,total20090,total);
    return true;
    }
    return /\d/.test(String.fromCharCode(keynum));
    }

    pero no funciona la multiplicación. Qué falla?
    Muchas gracias!!

  • Buenas, gracias por la aportación. Sólo un detalle, mis usuarios son malos y lo que hacen es copiar letras en otro campo y consiguen pegarlas en éste :). Para evitarlo, lo se puede invocar con el onkeydown (onkeydown=”return justNumbers(event);” pero así no puedo usar los cursores… no sé, la perfección es compleja digo yo.

    • Su puede hacer una función que sea ‘onchange’, para que se ejecute cada vez que se añada algo (por ejemplo al pegar un texto).
      Esta función comprobaría si el contenido del campo es entero, y sería algo así:

      function validarEntero(valor)
      {
      // intento convertir a entero.
      // si era un entero no le afecta, si no lo era lo intenta convertir
      valor = parseInt(valor)

      // Compruebo si es un valor numérico
      if (isNaN(valor))
      {
      // entonces (no es numero) devuelvo el valor
      return “”valor;
      }
      else
      {
      // En caso contrario (Si era un número) devuelvo el valor cadena vacía
      return '';
      }
      }

      Supongo que algo así debería de funcionar… pero no lo he probado.

      Si lo probáis ya me contáis!

      Fran.

    • Muy buenas!
      Si lo que preguntas es si se puede añadir ese código, la respuesta es: sí, se puede.

      Es más se puede añadir todo lo que quieras. Para eso lo dejamos ahí, para que hagáis lo que queráis con él.

      Pero tú lo que quieres es saber como se haría lo que preguntas, verdad? Ay, pillín!!
      😉

      Aquí va:

      Con /\d/.test(String.fromCharCode(keynum)) hace toda la comprobación.

      Básicamente lo que hacemos es
      1) recoger el código pulsado y guardado en keynum
      2) lo convertimos a su valor en la tabla ASCII con String.fromCharCode(keynum)
      3) comprobamos que sea un número con /\d/.test()

      Si no es un número, el return será false y no se mostrará nada.
      Por lo tanto podemos añadir una comprobación antes del return para que lance un alert con el mensaje.

      [code language=”javascript”]
      function justNumbers(e)
      {
      var keynum = window.event ? window.event.keyCode : e.which;

      if ((keynum == 8) || (keynum == 46))
      return true;

      var char = /\d/.test(String.fromCharCode(keynum));
      if (char == false)
      {
      alert(‘Sólo pueden introducirse números’);
      }

      return char;
      }

      [/code]

      Lo he hecho más separado para que se entienda mejor… Y no lo he probado. Ya me contáis si funciona 😛

  • Hola,

    Estuve revisando el cod que compartes y es interesante, pero lamentablemente no se como implementarlo en mi cod ya que tengo vinculado el input en cuestion a una función que hace varias cosas y al integrar tu cod pasa directamente al alert y no me valida nada, requiero que en el input se permita el ingreso solamente de números.

    Agradeceré tu ayuda y pronta respuesta.

    Saludos.

Deja un comentario