Cómo forzar el campo de entrada para ingresar números solo usando JavaScript?

Restringir al usuario solo a los valores de entrada numéricos es extremadamente importante, especialmente al tomar datos en un formulario. Hay numerosos ejemplos en los que restringir al usuario para evitar cualquier entrada incorrecta es importante, como tomar el número de teléfono del usuario o tal vez preguntarle al usuario sobre su edad.

En HTML, la etiqueta de entrada se puede configurar para tomar solo entradas numéricas configurando su tipo propiedad al número o para Tel. Sin embargo, hacerlo a través de JavaScript será un poco complicado.

Paso 1: el documento HTML

Cree un archivo HTML, y en ese archivo, configure un campo de entrada y algún texto que le indique al usuario que ingrese datos en el campo de texto con la ayuda de las siguientes líneas:

Ingrese números aquí

En estas líneas:

• La propiedad de la etiqueta de entrada OnKeyPress se ha establecido en el valor de retorno del verifique el número() método
• La propiedad OnKeyPress se ejecuta en un evento específico que ocurre, y este evento es una prensa de clave, así que pase el evento dentro del verifique el número() método también.

Ejecutar la página web HTML ahora proporcionará el siguiente resultado en el navegador:

Actualmente, todos los tipos de caracteres se pueden escribir dentro de este campo de texto:

Pero esto cambiará en la siguiente sección.

Paso 2: Configurar el código JavaScript

En el archivo JavaScript o en el etiqueta, comience creando la función llamada como verifique el número():

función checkNumber (evento)
// Las próximas líneas entran aquí

Dentro de esta función, lo primero es obtener el código ASCII de la tecla Presione usando el "evento" variable:

var acode = evento.cual ? evento.cuál evento.clave;

Después de eso, si el código ASCII no es de número, entonces regrese FALSO al campo de entrada de lo contrario, regrese verdadero:

if (acode> 31 && (acode < 48 || aCode > 57)) devolver falso;
devolver verdadero;

El fragmento de código completo será como:

función checkNumber (evento)
var acode = evento.cual ? evento.cuál evento.clave;
if (acode> 31 && (acode < 48 || aCode > 57)) devolver falso;
devolver verdadero;

Con eso, ha terminado con la configuración de la porción de JavaScript.

Paso 3: Probar el campo de entrada

Después de que haya terminado con los pasos 1 y el paso 2, simplemente ejecute el documento HTML e intente poner valores dentro del campo de entrada y observe su comportamiento:

Ahora solo permite que se escriban números dentro de él e ignora otro carácter

Conclusión

Restringir al usuario solo ingresar caracteres numéricos dentro de una entrada usando JavaScript. Luego, en ese caso, llame a una función en cada tecla presionada dentro de ese campo de entrada, y dentro de esta función, compare el código ASCII de la tecla presionado contra los códigos ASCII de valores numéricos. Basado en esta comparación, permita que las teclas se ingresen dentro del campo de entrada.