Validar números

En ocasiones es necesario que el usuario solo pueda introducir números en un elemento input type="text" o caja de texto, y aunque utilicemos los nuevos tipos de HTML5 como input type="number" no en todos los navegadores funciona correctamente.

Para corregir esta limitación podemos utilizar la siguiente función, que he denominado esNum, llamándola así: onkeypress="return esNum(event,this)", que impide que el usuario teclee otra cosa que no sean números. Además podemos hacer que si necesitamos introducir números reales solo pueda teclear una coma, o si necesitamos números negativos que solo pueda teclear un solo signo menos.

Además, JavaScript dispone de la función isNaN, que podríamos traducir de forma libre como "¿es un No Número?", que evalúa un argumento para determinar si es un número. Su sintaxis es isNaN(valor), siendo valor el valor que se desea evaluar.

isNaN es una función de alto nivel y no está asociada a ningún objeto. isNaN intenta convertir el parámetro pasado a un número. Si el parámetro no se puede convertir, devuelve true; en caso contrario, devuelve false.

Código JavaScript



function esNum(ev, el) {
    /* ev: evento; el: elemento; */
    tecla = (document.all) ? ev.keyCode : ev.which;

    // Permite un solo punto decimal
    if (el.value.indexOf('.') == -1 ? tecla == 46 : false) { return true; }

    // Permite números negativos (después de escribir un número)
    if (tecla == 45 && el.value !== '') { el.value = (-1) * el.value; }

    // Permite tecla de retroceso (borrar)
    if (tecla == 8) { return true; }

    // Permite tecla Tab
    if (tecla == 9) { return true; }

    // Patrón de entrada: solo acepta numeros positivos
    patron = /[0-9]/;
    tecla_fin = String.fromCharCode(tecla);
    return patron.test(tecla_fin);
}

Código HTML



<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="(cc) 3con14" />
  <link rel="stylesheet" href="/css/estilos.css">
  <title>Validar números</title>
</head>

<body>
  <div class="contenedor">

    <div class="ejercicio">
        <p>Sumar dos números</p>
    </div>

    <div class="datos">
      <label for="dato1">n1 =
        <input type="text" id="dato1" class="num" maxlength="6"
               onkeypress="return esNum(event,this)" onfocus="this.select();">
      </label>
      
      <label for="dato2">n2 =
        <input type="text" id="dato2" class="num" maxlength="6"
               onkeypress="return esNum(event,this)" onfocus="this.select();">
      </label>
    </div>

    <div id="acciones" class="acciones">
      <button id="calcular">Calcular</button>
      <button id="borrar">Borrar</button>
    </div>

    <div id="respuesta" class="respuesta"></div>

  </div>

  <script src="/js/codigo.js"></script>
</body>

</html>

Nota: el código CSS es semejante al de otros ejemplos.

Demo

Validar números

Código JavaScript

Código HTML

Demo

Licencias ...

Visitas ...