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:
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:
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:
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í
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.El código final nos queda de la siguiente manera
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
jQuery(document).ready, generalmente al antes de cerrar el </body>Todo junto nos queda
Nunca están demás estos pequeños tips que te pueden sacar de apuros.
13 respuestas
I am reallʏ impreѕsed along with your writіng talents and also with the layout
to your blog. Is this a paid theme or did you modify it yоurѕelf?
Either way stay up the nice high quality writing, it’s
rare to peer a great weblog like thіs one nowaԁays..
Gracias Justamente era lo que necesitaba, especifico y que cumpliera la regla
Hola Anderson, que bueno saber que te ha servido de ayuda, saludos!
Hola, excelente ejemplo, me sirvió muchísimo.
muchas gracias, estuvo bien explicado, simple basico pero muy excelente material, saludos desde bogota, colombia
Simplemente muy agradecido
y como hago para poner el punto decimal?
Que tal Jose,
Puedes agregar un OR en el if que verifica el backspace, para que permita otros caracteres, el punto en código ASCII es el 46, quedaría de la siguiente manera
if ( code==8 || code==46 )Keep on working, great job!
Hello There. I found your blog using msn. Thiss is
a really well written article. I wil be sure to bookmark
it and return to read more of your useful info.
Thanks for the post. I’ll certainly comeback.
Simply desire to say your article is as astounding.
The clarity in your post is simply excellent and i could assume you’re an expert on this subject.
Well with your permission let me to grab your RSS
feed to keep updated with forthcoming post. Thanks a million and please carry on the gratifying
work.
excelente para hacer un rastreador por numero
Keep on writing, great job!