logo 3con14 js cod
logo 3con14 js cod
  • Javascript
  • Conceptos
  • Ejemplos
  • Tips & Tricks
  • ► TAREAS
 
 
icon html5
icon css3
mlogo 3con14 js cod

  • Inicio
  • Tips & Tricks
  • Validar números

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

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

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

Demo

validar numeros

 

  • Anterior
  • Siguiente

Tips and Tricks

  • Generar números aleatorios
  • Métodos para escribir con JS
  • Ordenamiento por burbuja
  • Pop-ups en Javascript
  • Redondear números
  • Validar números

Recursos

  • Visual Studio Code
  • Sublime Text
  • Prepros
  • CodePen .
  • Dillinger / MDP
Mas...

Mas...

codepen

uniwebsidad

overapi

can i use

w3schools

mdn

eloquent

Archivo .PDF del Libro

js arkaitz

Licencias ...

3con14─LAB 1998 - 2021
www.3con14.biz
(cc) Jesús Plaza M.
─ Otros Reconocimientos ─

Visitas ...

Hoy ... 23

Ayer ... 41

Week 338

Mes ... 117

TOTAL ... 120243

(cc) 3con14. Esta obra está bajo Licencia
Creative Commons Atribución-No Comercial-Compartir Igual 4.0

  • Javascript
  • Conceptos
  • Ejemplos
  • Tips & Tricks
  • ► TAREAS