Personnaliser la saisie d'un INPUT

Bonjour les petites lanternes du développement.

Je ne sais pas si je suis au bon endroit mais je recherche à faire une chose un peu particulière.

j'ai un input, je cherche à ce que la saisie soit au format plaque d'immatriculation

Code:

---

<input type="texte" name="immat" id="immat" value="" placeholder="xx-111-xx" style="text-align:center; font-size:16px"/>

---

J'aimerai que lorsque que l'utilisateur écrit les deux premières lettres, le "-" se mette tout seul puis après les trois chiffre le "-" se mette également tout seul. un peu dans le genre des numéro OEM de Windows à l'époque.

Pourriez vous m'aider

Merci à vous

des bisous

Bonjour,
J'ai une petite idée concernant ton problème , je pense aux expressions régulières si ca te dit quelque chose ?

Il va falloir mettre en place un écouteur d'évènement keypress sur ton input , et à chaque saisie tu vérifie si la saisie est bonne.
J'ai pas une idée optimal , mais si tu fais une boucle avec expression régulières ca devrait le faire
Tu fais en sorte que dès que tu as un match sur ta saisie tu rajoutes un tiret , et si tu arrives sur le dernier test et qu'il est bon ca te donnera
11-123-11- et la tu pourras donc enlever le tiret de fin.
J'ai oublié un petit détail , vérifie avant de mettre un tiret que la chaine que tu viens de vérifier n'est pas suivi d'un tiret , parce que sinon ca va générer des plaques comme ca si tu modifies plusieurs fois : 12-256---78
Bien sur lors de la validation du form tu vérifie quand même que ta plaque est au bon format.
Parce que sinon quelqu'un peut taper une plaque correcte : 12-345-67 et la modifier juste après pour te donner ca par exemple : 12-34BCD-67

J'espère avoir été suffisamment clair
Bonne lecture et bon courage :)

Citation:

---

Envoyé par gabi7756

Bonjour,
J'ai une petite idée concernant ton problème , je pense aux expressions régulières. Il va falloir mettre en place un écouteur d'évènement keypress...

---

C'est la solution qui vient en effet en premier à l'esprit. Cependant, Si notre amie Lucie est un peu déboussolée par le JS, il est possible de s'en passer. On peut faire appel à un input auquel on donne un attribut pattern. Cela ne dispensera malheureusement pas de devoir construire une petite expression rationnelle.

l'attribut pattern ne repond pas a sa problematique, dans le sens ou ca n'ajoute pas automatiquement des caracteres, mais se contente de verifier l'input final. j'ai bien peur qu'il faille passer par du JS

note : j'ai change le type="text" par un type="search" (ce qui permet de supprimer le text dans l'input) (je l'avoue... par facilite)

Code:

---

<input type="search" name="immat" id="immat" value="" placeholder="xx-111-xx" style="text-align:center; font-size:16px"/>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

document.getElementById('immat').addEventListener('keydown', function(e) { e.preventDefault(); if(this.value.length > 8) { return; }   if((this.value.length < 2 || this.value.length > 5) && /Key[A-Z]/.test(e.code)) { this.value += e.key; }   if((this.value.length > 2 && this.value.length < 6) && /\d/.test(e.key)) { this.value += e.key; }   if(this.value.length === 2 || this.value.length === 6) { this.value += '-'; } });

---

Citation:

---

Envoyé par Doksuri

l'attribut pattern ne repond pas a sa problematique, dans le sens ou ca n'ajoute pas automatiquement des caracteres, mais se contente de verifier l'input final.

---

C'est vrai ! Ça ne répond qu'à sa demande générale :

Citation:

---

j'ai un input, je cherche à ce que la saisie soit au format plaque d'immatriculation

---

J'ai zappé le reste.
Ton script répond parfaitement à sa demande.

Bien vu ton script mais si je peux me permettre une réflexion , faudrait rajouter un système pour pouvoir modifier ta saisie , parce que dans ton cas tu pars du principe que l'utilisateur va pas se tromper mais on les connais lol
:)
Avec ca tu autorises la suppression donc tu pourras corriger ta plaque

Code:

---

1 2 3

if(e.code!='Backspace'){ e.preventDefault() }

---

oui, je sais.. j'avais la flemme

parce que supprimer un char va entrer en conflit avec l'ajout automatique du tiret '-'

donc, si l'utilisateur se trompe, il peut tout supprimer avec la petite croix

Une solution consisterai à vérifier d'abord que les valeurs suivi sont les bonnes , et ensuite si elles sont suivis d'un - ; auquel cas on l'insere dans le input pour ne pas faire n'imp avec le reste.
Et faire ca 2 fois et demi du coup

Bref c'est vrai que ca fait l'affaire donc bon c'est bien.
Ca marche donc bon on va s'en contenter je crois :)

Citation:

---

Envoyé par gabi7756

on va s'en contenter je crois

---

personne ne t'empeche de proposer le code ultime :weird:

Je réemploi tes propos :
La flemme :p
Bon courage et bonne continuation