Comment n'autoriser que la saisie de chiffres dans un champ texte HTML ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-01-13 17:46:47

Question

Comment faire pour n'autoriser que la saisie de chiffres dans un champ texte HTML ?

Réponse

Il existe plusieurs solutions pour n’autoriser que la saisie de chiffres dans un champ texte, <input> ou <textarea>, en HTML.

Vous pouvez utiliser jQuery et la fonction replace, suivi d'une expression régulière pour n'autoriser que les chiffres :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Exemple</title>
</head>
<body>
<input type="text" class="chiffres" name="test">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
    $(".chiffres").keyup(function (event) {
                var value = jQuery(this).val();
                value = value.replace(/[^0-9]+/g, '');
                jQuery(this).val(value);
            });
});
</script>
</body>
</html>

Vous pouvez également utiliser l'attribut pattern HTML5 :

<input type="text" name="test" pattern="[0-9]">

Une autre solution consiste à utiliser un input du type number :

<input type="number" name="test">

Toutes ces solutions sont valides coté Client, mais n'oubliez pas que vous devez également contrôler la saisie coté Serveur. Pour cela vous pouvez utiliser les fonction is_numeric ou ctype_digit pour vérifier si la saisie est numérique avec PHP par exemple.