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

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, utilizando diferentes técnicas desde atributos HTML como validaciones usando javascript.

Campo tipo numérico

A partir de la versión 5 de HTML se introdujo el campo tipo numérico, usar este campo es nuestra primera opción para restringir al usuario que solo puede introducir dígitos mientras escribe.

La etiqueta es la siguiente:

<input type="number" id="age" name="age" />

La mayoría de los navegadores hoy en día soportan este tipo de campo, para obtener la lista completa puedes visitar el siguiente enlace: https://caniuse.com/input-number

Puedes encontrar mayor información del campo tipo numérico en el Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

Atributo pattern

Si el campo tipo numérico no es una opción, una alternativa es usar el atributo pattern que te permite definir mediante expresiones regulares como debe ser el formato que el usuario debe usar para escribir en ese input.

La etiqueta es la siguiente:

<input type="text" id="age" name="age" pattern="[0-9]+" />

La expresión regular [0-9] se traduce en solo dígitos y junto al modificador + significa que puede ser uno o más dígitos.

Validación mediante Javascript

En el siguiente ejemplo vamos a permitir solo números en nuestro campo de texto mediante el uso de Javascript.

El primer paso será crear una función en Javascript que validará que tecla el usuario ha presionado, esta función recibe como parámetro un evento del cual podemos determinar el código ASCII decimal de la tecla presionada.

La función es la siguiente:

<script type="text/javascript">
 function valideKey(evt){
    // code is the decimal ASCII representation of the pressed key.
    var code = (evt.which) ? evt.which : evt.keyCode;
 }
</script>

Los dígitos del 0 al 9 están en el rango del 48 al 57 de los caracteres visibles del código ASCII, pero también debemos permitir que el usuario pueda borrar los dígitos introducidos, el código ASCII de caracteres de control para esta tecla es el 8, como referencia pueden ver estas tablas

Caracteres Visibles: https://en.wikipedia.org/wiki/ASCII#ASCII_printable_characters
Caracteres de Control: https://en.wikipedia.org/wiki/ASCII#ASCII_control_characters

La función completa luce así

<script type="text/javascript">
function valideKey(evt){
    
    // code is the decimal ASCII representation of the pressed key.
    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{ // other keys.
      return false;
    }
}
</script>

El último paso es conectar nuestra función de validación con el campo de texto que queremos restringir solo para números, para esto vamos a usar el evento javascript onkeypress que le indica al navegador que ejecute nuestra función valideKey cada vez que el usuario presiona una tecla antes de mostrar su respectivo valor en el campo de texto.

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

El código final nos queda de la siguiente manera

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Age Validation</title>
        <script type="text/javascript">
		function valideKey(evt){
			
			// code is the decimal ASCII representation of the pressed key.
			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{ // other keys.
			  return false;
			}
		}
		</script>
    </head>

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

Permitir solo números usando jQuery

jQuery es una librería javascript muy popular que permite ejecutar código lo más compatible posible entre los distintos navegadores.

Lo primero que tenemos que hacer es cargar la librería jQuery en nuestro código HTML, usualmente en el <head> de nuestro documento colocamos el siguiente tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Luego colocamos nuestro código de validación cuando ya jQuery está listo para procesar los eventos en el jQuery(document).ready, generalmente al antes de cerrar el </body>

<script type="text/javascript">
// Initialize our function when the document is ready for events.
jQuery(document).ready(function(){
	// Listen for the input event.
	jQuery("#age").on('input', function (evt) {
		// Allow only numbers.
		jQuery(this).val(jQuery(this).val().replace(/[^0-9]/g, ''));
	});
});
</script>

Todo junto nos queda

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Age Validation</title>
		<!-- Include jQuery library -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

    <body>
        <form action="" method="post">
            <label for="age">Age:</label>
            <input type="text" name="age" id="age" />
            <input type="submit" value="Save" />
        </form>
		<script type="text/javascript">
		// Initialize our function when the document is ready for events.
		jQuery(document).ready(function(){
			// Listen for the input event.
			jQuery("#age").on('input', function (evt) {
				// Allow only numbers.
				jQuery(this).val(jQuery(this).val().replace(/[^0-9]/g, ''));
			});
		});
		</script>
    </body>
</html>

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

Tecnología

Mailgun

Mailgun es un servicio brindado por Rackspace, el mismo te permite enviar y recibir correos de forma segura y confiable, una de sus principales características es la posibilidad de dar seguimiento y verificar las estadísticas de los correos.

Tips

Custom Web Fonts

Con la entrada de HTML5 se han abierto muchas puertas para poder utilizar un Font que no es estándar dentro de nuestra página, esto lo podemos lograr de utilizando la regla CSS3 @font-face, la librería Cufón de Javascript o servicios de Fonts en línea como lo es Google WEB Fonts.