¿Cómo escribir solo números en input text?

Cualquier sitio o sistema web requerira bajo ciertas circunstancias de cajas de texto que permitan que a los visitantes escribir solo números en input text, lamentablemente aun con lo poderoso que es el HTML5 todavía no se logra esta funcionalidad por sí solo.

Para forzar a nuestros visitantes a escribir solo números en input text haremos uso de un plugin muy poderoso de jQuery, hablo del jquery.numeric

jQuery – Numeric

Descargar Plugin jquery.numeric

Permite ingresar únicamente carácter validos (es decir, numéricos) en una caja de texto. Puede tomar los números negativos y un punto decimal. Puede proporcionar una devolución de llamada que se ejecuta cuando se pierde el enfoque y el valor en el cuadro de texto cuando no es un numero valido.

Agregamos las librerias jQuery que utilizaremos

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 
<script src="js/jquery.numeric.js" type="text/javascript"></script>

Agregamos la función jQuery que activara el funcionamiento que necesitamos

<script type="text/javascript">
  $(document).ready(function(){ 
	$('.solo-numero').numeric();
   });
</script>

Cabe señalar que del código anterior debemos poner particular cuidado al selector CSS que utilizaremos, en este caso se está usando el selector de clase “solo-numero”.

Agregamos la caja de texto a nuestro código HTML

<input id="text1" type="text" class="solo-numero" value="" placeholder="Ingrese solo numeros"/>

Listo, eso debería bastar para poder agregar a nuestra página cajas de texto que admitan únicamente valores numéricos.

Espero les sea de ayuda, los invito a comentar si tienen alguna duda y de paso a compartir.

Pueden visitar tambien la página del autor jQuery Plugin – Numeric para tener mas información o descargar un ejemplo.