Comment interdire les lettres dans un input HTML ?

Réponses rédigées par Antoine
Dernière mise à jour : 2022-06-02 18:44:51
Thèmes : html - input - javascript - lettres
Question

Comment faire pour interdire les lettres dans un input HTML, de telle manière qu'on affiche un message d'erreur lorsque qu'un input text contient des lettres, et que le champ texte soit automatiquement vidé ?

Réponse

Pour interdire les lettres dans un input HTML, vous pouvez utiliser une expression régulière et la méthode JavaScript test().

L'expression régulière [a-zA-Z] permet d'identifier les caractères alphabétiques en minuscules et en majuscules.

La méthode test(), comme son nom l'indique, permet de tester la correspondance entre l'expression régulière et la chaine de caractères.

Dans l'exemple ci-dessous on utilise l'évènement onkeyup sur un champ texte : ainsi dès lors qu'une frappe clavier a lieu dans le champ <input>, on teste s'il s'agit bien d'une lettre, si ce n'est pas le cas on alerte l'utilisateur et on vide le champ texte.

if(/[a-zA-Z]/g.test(this.value)) {
  alert('Les lettres sont interdites');
  this.value = '';
}

Voici un exemple :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment interdire les lettres dans un input HTML ?</title>
</head>  
<body>
<input type="text" onkeyup="if(/[a-zA-Z]/g.test(this.value)){alert('Les lettres sont interdites');this.value = '';}">
</body>
</html>