Bloquer la taille d'un champ number

Par EllyWill, il y a 6 ans

Les bases HTML/CSS

Bonjour à tous,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

J'ai un formulaire d'inscription sur mon site internet, des champs classiques en text, des champs email, un champ tel. Sur tous ceux-là, j'ai pu mettre en place un maxlength pour la taille maximum de mes champs.
J'essaye de faire la même chose pour un champ type number, comme vous le voyez ci-dessous, et ça ne marche pas, sur Firefox et Google Chrome en bureau et en mobile.
J'ai choisi de passer le type de mon champ code postal en number afin d'avoir uniquement le clavier numérique sur mobile. Quand il était encore en text, le maxlength fonctionnait bien.

<div class="col-12 form-group"> <!-- CODE POSTAL --> <label id="CP" for="CPinput">Code postal<span class="etoile">*</span></label> <input type="number" id="CPinput" class="form-control" name="CPinput" placeholder="Entrez votre code postal" value="<?php if(isset($CPinput)) { echo $CPinput; } ?>" pattern="[0-9]" maxlength="5" required /> </div>

Ce que je veux

Donc voilà, j'ai besoin de votre aide pour que mon champs code postal reste en type number afin d'avoir le clavier numérique sur mobile, et qu'il est une taille limité à 5 chiffres.

Je vous remercie d'avance pour votre aide !

2 réponses

EllyWill, il y a 6 ans

Bonjour Lolo3129,
Merci pour ta réponse.
J'ai en effet testé cette solution. Mettre le max à 99999 fonctionne en effet, mon formulaire n’est pas envoyé tant que la valeur n'est pas corrigée et le message d'erreur correspond. Mais c'est pour moi une "solution de contournement".

Car, je souhaiterais vraiment qu'on ne puisse pas écrire dans l'input plus de 5 caractères. Comme on peut le paramétrer sur d'autres champs.

EllyWill, il y a 6 ans

Bonjour Lolo3129,
J'étais tombé sur un lien qui propose les mêmes solutions que le tiens,
J'y ai trouvé une autre solution pour contourner le problème, mais qui se rapproche beaucoup de ce dont j'ai besoin :

<input type="tel" id="CPinput" class="form-control" name="CPinput" placeholder="Entrez votre code postal" value="<?php if(isset($CPinput)) { echo $CPinput; } ?>" pattern="[0-9]*" maxlength="5" required />

J'ai utilisé un champ de type "tel" pour avoir un clavier numérique, avec le maxlenght qui fonctionne et un pattern qui n'autorise que les chiffres.

Donc, cela fonctionne, mais le clavier est un clavier "tel" et non "nombre" donc il y a des caractères en plus. Cependant, avec le pattern, ils ne peuvent être saisis.

J'ai aussi testé une autre solution, savoir utiliser un type text et spécifier l'utilisation d'un clavier exclusivement numérique, ce qui est ce que je veux.
Ça fonctionne bien sur le navigateur mobile Google Chrome ! Mais pas sur Firefox Mobile (qui reste avec un clavier "normal")

<input type="text" id="CPinput" class="form-control" name="CPinput" placeholder="Entrez votre code postal" value="<?php if(isset($CPinput)) { echo $CPinput; } ?>" inputmode="numeric" pattern="[0-9]*" minlength="5" maxlength="5" required />

Donc je n'ai pas encore de solution 100% parfaite, mais je m'en rapproche !
Je pense rester sur ma dernière solution et essayer de trouver comment spécifié à Firefox mobile d'utiliser un pavé numérique, sinon tant pis pour les firefox mobile !