Comment forcer le champ d'entrée à entrer des nombres uniquement à l'aide de JavaScript?

La restriction de l'utilisateur à seulement des valeurs d'entrée numérique est extrêmement importante, en particulier lors de la prise de données sur un formulaire. Il existe de nombreux exemples où la restriction de l'utilisateur pour éviter une mauvaise entrée est importante, comme prendre le numéro de téléphone de l'utilisateur ou peut-être demander à l'utilisateur de son âge.

Dans HTML, la balise d'entrée ne peut être définie que pour prendre des entrées numériques en définissant son taper propriété au nombre ou pour Tél. Cependant, le faire via JavaScript va être un peu délicat.

Étape 1: le document HTML

Créez un fichier HTML, et dans ce fichier, configurez un champ de saisie et un texte indiquant à l'utilisateur de saisir des données dans le champ de texte à l'aide des lignes suivantes:

Entrez les numéros ici

Dans ces lignes:

• La propriété OnKeyPress de la balise d'entrée a été définie sur la valeur de retour du checkNumber () méthode
• La propriété OnKeyPress est exécutée sur un événement spécifique qui se produit, et cet événement se trouve être une presse à clé, alors passez l'événement à l'intérieur de checkNumber () Méthode aussi.

L'exécution de la page Web HTML fournira désormais le résultat suivant sur le navigateur:

Actuellement, tous les types de caractères peuvent être écrits dans ce champ de texte:

Mais cela changera dans la section suivante.

Étape 2: Configurer le code JavaScript

Dans le fichier javascript ou dans le Tag, commencez par créer la fonction nommée checkNumber ():

Fonction CheckNumber (événement)
// Les lignes à venir entrent ici

À l'intérieur de cette fonction, la première chose est d'obtenir le code ASCII de la touche appuyant en utilisant le «événement" variable:

var acode = événement.qui ? événement.qui: événement.code clé;

Après cela, si le code ASCII n'est pas du nombre, retournez FAUX Au champ de saisie autrement, renvoyez True:

if (Acode> 31 && (Acode < 48 || aCode > 57)) retourne false;
Retour Vrai;

L'extrait de code complet sera comme:

Fonction CheckNumber (événement)
var acode = événement.qui ? événement.qui: événement.code clé;
if (Acode> 31 && (Acode < 48 || aCode > 57)) retourne false;
Retour Vrai;

Avec cela, vous avez terminé avec la configuration de la partie JavaScript.

Étape 3: Tester le champ de saisie

Une fois que vous avez terminé les étapes 1 et 2, exécutez simplement le document HTML et essayez de mettre des valeurs dans le champ de saisie et observez son comportement:

Il ne permet désormais que des numéros d'être écrits à l'intérieur et ignorent d'autres personnages

Conclusion

Pour restreindre l'utilisateur à entrer uniquement des caractères numériques à l'intérieur d'une entrée à l'aide de JavaScript. Ensuite, dans ce cas, appelez une fonction sur chaque touche appuyée à l'intérieur de ce champ de saisie, et dans cette fonction, comparez le code ASCII de la touche enfoncée par rapport aux codes ASCII des valeurs numériques. Sur la base de cette comparaison, permettez aux touches d'être entrées dans le champ de saisie.