Solo permitir numeros en un input

Solo permitir numeros en un input

Si tienes un pequeño programa JavaScript, que hace cálculos con un campo de texto, te resultará útil limitar el contenido a sólo números…

Hay muchas formas de conseguir solo permitir numeros en un input, desde la más simple a la más sofisticada, así como complejos algoritmos basados en bucles, pero te propongo una solución mejor.

El ejemplo completo que sirve para ilustrar este post ha sido extraido de la web letranif.com que sirve para calcular la letra del NIF, pudiendo así validar cualquier DNI.

En el siguiente ejemplo, un campo input de HTML, de tipo texto, cuyo ID y nombre es «dni«:

<input type="text" name="dni" id="dni" value="" title="Introduce DNI" accesskey="d" maxlength="16" size="16" />

El formulario donde está incluido el campo anterior llama a una función de JavaScript, como puedes ver en la siguiente línea de código:

<form id="f" method="post" action="javascript:calcula();">

La primera línea de código de la función anterior es la siguiente:

document.forms[0].dni.value=document.forms[0].dni.value.replace(/[^0-9]/g, "");

De esa forma, antes de proceder a los cálculos propiamente dicho, se reemplaza cualquier caracter que no sea un número con una cadena vacía, gracias a la función «replace» de JavaScript que funciona de la siguiente forma:

string.replace(searchvalue, newvalue)

En nuestro ejemplo, hemos usado la siguiente expresión regular /[^0-9]/g como searchvalue y una cadena vacía o «» como newvalue.

La expresión regular tiene 2 partes precedidas del símbolo /:

  • La 1ª, es decir /[^0-9], significa cualquier caracter que NO sea un dígito del 0 al 9, el símbolo ^ que precede sirve para negar la expresión.
  • La 2ª, es decir /g, sirve para que la expresión se evalue y ejecute más de una vez, concretamente todas las que sean necesarias.