Permitir solo números en un campo de texto con Javascript

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Que tal amigos lectores, en este pequeño pero muy útil post veremos cómo podemos restringir que un usuario solo pueda escribir números en un campo de texto de un formulario HTML

El formulario:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Age Validation</title>
    </head>

    <body>
        <form action="" method="post">
            Age: <input type="text" name="age" id="age" />
            <input type="submit" value="Save" />
        </form>
    </body>
</html>

El siguiente paso será crear una función en Javascript que validara que tecla el usuario a presionado tomando como parámetro el evento que contendrá el código ASCII decimal de dicha tecla

<script type="text/javascript">
  function valideKey(evt)
  {
    var code = (evt.which) ? evt.which : evt.keyCode;
  }
</script>

Ahora , en base al código ASCII de los caracteres visibles, los números están en el rango 48 al 57, debemos permitir también que el usuario pueda borrar, el código ASCII de caracteres de control para esta tecla es el 8, como referencia pueden ver estas tablas

<script type="text/javascript">
  function valideKey(evt)
  {
    var code = (evt.which) ? evt.which : evt.keyCode;
    if(code==8) 
    {
      //backspace
      return true;
    }
    else if(code>=48 && code<=57) 
    {
      //is a number
      return true;
    }
    else
    {
      return false;
    }
  }
</script>

El último paso, indicarle al navegador que cuando el usuario presiona una tecla, ejecute nuestra función de validación antes de mostrar dicha tecla en el campo de texto

Age: <input type="text" name="age" id="age" onkeypress="return valideKey(event);" />

El código final, todo junto

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Age Validation</title>
        <script type="text/javascript">
            function valideKey(evt) {
                var code = evt.which ? evt.which : evt.keyCode;
                if (code == 8) {
                    //backspace
                    return true;
                } else if (code >= 48 && code <= 57) {
                    //is a number
                    return true;
                } else {
                    return false;
                }
            }
        </script>
    </head>

    <body>
        <form action="" method="post">
            Age:
            <input
                type="text"
                name="age"
                id="age"
                onkeypress="return valideKey(event);"
            />
            <input type="submit" value="Save" />
        </form>
    </body>
</html>

Nunca están demás estos pequeños tips que te pueden sacar de apuros.

Entradas relacionadas
Software libre
Tecnología

Software Libre

El Software Libre es toda aplicación o conjunto de programas informáticos que proporcionan el código fuente en que fue desarrollado y este puede ser estudiado, modificado, y utilizado libremente con cualquier fin, inclusive puede ser redistribuido con cambios o mejoras o sin ellas, de manera comercial o no comercial.

Leer Más >>
Seguridad

Clickbaits

Los clickbaits tienen como propósito atraer la mayor cantidad de visitas posible a alguna página web y en muchos casos, exponen riesgos de seguridad al usuario.

Leer Más >>
WordPress Linting Hero Image
Tips

WordPress Linting

El uso de linting nos ayuda a mantener el estándar en nuestro código fuente, forzando al programador o grupo de programadores a seguir ciertas reglas preestablecidas, unificando de esta manera la legibilidad del mismo.

Leer Más >>

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *