Permitir solo entrada numérica en HTML

1. Use type="number" en la etiqueta input para permitir solo la entrada numérica en HTML
2. Escriba la validación del lado del cliente en JavaScript para permitir solo la entrada numérica en HTML

Este artículo presentará algunos métodos para permitir solo la entrada numérica en el campo de entrada de texto en HTML.

Use type="number" en la etiqueta input para permitir solo la entrada numérica en HTML

En HTML, usamos la etiqueta input para tomar las entradas del usuario.

Podemos especificar el tipo de entrada con el atributo type en la etiqueta input. La etiqueta input acepta varios tipos de entrada como texto, números, contraseñas, correo electrónico, etc.

Podemos usar el atributo type para permitir solo la entrada numérica en HTML. Por ejemplo, cree una etiqueta input con el atributo type como number.

A continuación, cree un botón de envío. El formulario no se enviará cuando escribamos caracteres en lugar de números.

Sin embargo, el comportamiento es diferente entre los navegadores.

En Firefox, el siguiente ejemplo permite cualquier entrada en el área de entrada. Pero no permite enviar el valor al hacer clic en el botón.

En el caso de Chrome, no permite escribir ningún otro carácter en lugar de los caracteres numéricos. Firefox permite pegar las otras entradas, pero Chrome no lo permite.

Por ejemplo, si copiamos un texto aleatorio y lo pegamos en el área de entrada de Firefox, el texto se pegará, pero esto no sucede en Chrome. Este comportamiento también es el mismo al arrastrar y soltar contenido en el área de texto.

Entonces, para agregar algo de validación, podemos deshabilitar las operaciones de arrastrar y soltar y pegar en el área de texto. Por ejemplo, escribe los atributos ondrop y onpaste en la etiqueta input y escribe return false; como sus valores.

Al hacer esto, la función de copiar y pegar y arrastrar y soltar se desactivará en el área de texto.

Código de ejemplo:

 <form action="">
 <input type="number" ondrop="return false;" onpaste="return false;" />
 <button type="submit" value="Submit">Click</button>
 </form>

Escriba la validación del lado del cliente en JavaScript para permitir solo la entrada numérica en HTML

Si bien el método anterior no funciona perfectamente en todos los navegadores, es necesario agregar alguna validación del lado del cliente para permitir escribir solo valores numéricos en el área de texto. Para eso, necesitamos escribir algo de JavaScript.

Necesitamos agregar tal validación donde la entrada del valor 0-9 solo se puede aceptar. Para eso, tenemos un evento onkeypress en JavaScript.

El evento onkeypress se ejecuta cuando el usuario presiona la tecla. En el evento onkeypress, podemos devolver solo los valores entre 0-9.

Podemos usar la propiedad charCode para obtener el código de carácter de la entrada presionada.

Por ejemplo, escriba el evento onkeypress como un atributo en la etiqueta input.

Dentro del atributo devuelva la declaración event.charCode>=48 y event.charCode<=57 usando el operador && como se muestra en el ejemplo a continuación. Luego, escriba el atributo requerido al final de la etiqueta input.

En el siguiente ejemplo, 48 y 57 son el código de carácter Unicode de 0 y 9, respectivamente. El JavaScript solo devolverá el valor de 0-9.

Es cómo podemos usar el evento onkeypress junto con la propiedad charCode para permitir solo la entrada numérica en HTML.

Código de ejemplo:

<form>
<input type="number" ondrop="return false;" onpaste="return false;"
onkeypress="return event.charCode>=48 && event.charCode<=57" required/>
<button type="submit" value="Submit">Click</button>
</form>