Autoriser uniquement les entrées numérique en HTML

1. Utilisez type="number" dans la balise input pour autoriser uniquement la saisie numérique en HTML
2. Écrire la validation côté client en JavaScript pour autoriser uniquement la saisie numérique en HTML

Cet article présentera quelques méthodes pour autoriser uniquement la saisie numérique dans le champ de saisie de texte en HTML.

Utilisez type="number" dans la balise input pour autoriser uniquement la saisie numérique en HTML

En HTML, nous utilisons la balise input pour prendre les entrées de l’utilisateur.

Nous pouvons spécifier le type d’entrée avec l’attribut type dans la balise input. La balise input accepte différents types d’entrée comme du texte, des chiffres, des mots de passe, des e-mails, etc.

Nous pouvons utiliser l’attribut type pour autoriser uniquement la saisie numérique en HTML. Par exemple, créez une balise input avec l’attribut type comme number.

Ensuite, créez un bouton d’envoi. Le formulaire ne sera pas soumis lorsque nous saisirons des caractères plutôt que des chiffres.

Cependant, le comportement est différent selon les navigateurs.

Dans Firefox, l’exemple ci-dessous autorise toute saisie dans la zone de saisie. Mais il ne laisse pas la valeur être soumise lorsque vous cliquez sur le bouton.

Dans le cas de Chrome, il ne permet pas de saisir d’autres caractères que les caractères numériques. Firefox autorise le collage des autres entrées, mais Chrome ne le permet pas.

Par exemple, si nous copions du texte aléatoire et le collons dans la zone de saisie de Firefox, le texte sera collé, mais cela ne se produit pas dans Chrome. Ce comportement est également le même lorsque vous faites glisser et déposez du contenu dans la zone de texte.

Donc, pour ajouter une certaine validation, nous pouvons désactiver les opérations de glisser-déposer et coller dans la zone de texte. Par exemple, écrivez les attributs ondrop et onpaste dans la balise input et écrivez return false; comme leurs valeurs.

En faisant cela, la fonction copier-coller et glisser-déposer sera désactivée dans la zone de texte.

Exemple de code :

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

Écrire la validation côté client en JavaScript pour autoriser uniquement la saisie numérique en HTML

Bien que la méthode ci-dessus ne fonctionne pas parfaitement dans tous les navigateurs, il est nécessaire d’ajouter une validation côté client pour permettre de saisir uniquement des valeurs numériques dans la zone de texte. Pour cela, nous devons écrire du JavaScript.

Nous devons ajouter une telle validation où l’entrée de la valeur 0-9 ne peut être acceptée. Pour cela, nous avons un événement onkeypress en JavaScript.

L’événement onkeypress s’exécute lorsque l’utilisateur appuie sur la touche. Dans l’événement onkeypress, on ne peut retourner que les valeurs entre 0-9.

Nous pouvons utiliser la propriété charCode pour obtenir le code de caractère de l’entrée enfoncée.

Par exemple, écrivez l’événement onkeypress en tant qu’attribut dans la balise input.

À l’intérieur de l’attribut, renvoyez l’instruction event.charCode>=48 et event.charCode<=57 en utilisant l’opérateur && comme indiqué dans l’exemple ci-dessous. Ensuite, écrivez l’attribut required à la fin de la balise input.

Dans l’exemple ci-dessous, 48 et 57 sont le code de caractère Unicode de 0 et 9, respectivement. Le JavaScript ne renverra que la valeur de 0-9.

C’est ainsi que nous pouvons utiliser l’événement onkeypress avec la propriété charCode pour autoriser uniquement la saisie numérique en HTML.

Exemple de code :

<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>