Récupérer une variable d'une fonction et de la mettre dans un maxlength d'un input.

**Kévin78** · 14/06/2019, 10h26

Bonjour à tous,

J'ai une fonction qui récupère la valeur d'un <select>, et j'aimerais que cette valeur deviennent le max de caractère d'un input.
Des amis m'ont dit qu'avec PHP c'étais possible mais je ne pense pas, concrètement :

Sur ma page de test je voulais que si un utilisateur choisis comme indicatif téléphonique (+454 par exemple) à 3 chiffres par exemple ou plus, on adapte le maximum de chiffre qu'il pouvait saisir dans l'input du numéro de téléphone.

Je pense que cela est faisable en javascript mais je n'est pas trouvé comment (ou mal chercher).

Merci d'avance pour vos réponses.
Bonne journée.

**Watilin** · 14/06/2019, 11h53

Salut,

pour commencer il faut réagir aux évènements sur le <select> : "change" ou "input" (dans le cas du <select>, les deux sont équivalents).
Tu peux utiliser querySelector() (ou getElementById() si tu as mis un id) pour obtenir une référence sur le <select>, puis addEventListener() pour inscrire un gestionnaire d’évènement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const leSelect = document.querySelector("select");
leSelect.addEventListener("input", function (event) {
  ...
});

Ensuite, je pense que tu auras besoin d’établir une liste des correspondances entre les indicatifs téléphoniques et les maxLength associées. Pour ça tu peux utiliser un objet Map :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
const correspondances = new Map([
  [ "+454", 13 ],
  [ "+33", 12 ],
  // etc.
]);

Dans le gestionnaire d’évènement, tu utiliseras this.value ou this.selectedOptions[0].textContent selon que tu as mis les données dans les attributs value="…" des <option> ou dans leur contenu texte direct.

Enfin, il te faut également une référence sur ton input avec querySelector() ou getElementById().

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
...
const leInput = ... ;
 
const correspondances = ... ;
 
leSelect.addEventListener("input", function (event) {
  const indicatif = this.value; // ou this.selectedOptions[0].textContent
  const max = correspondances.get(indicatif);
  leInput.maxLength = max; // attention au L majuscule
});

Bien sûr, avec tout ça, il ne faut pas oublier le piège du « DOM pas prêt », donc :

soit tu mets ta balise <script> à la fin du <body> (ou après) ;
soit tu mets un attribut async ou defer sur ta balise <script> ;
soit tu utilises l’évènement "DOMContentLoaded".

**Kévin78** · 14/06/2019, 14h44

Salut,

Je débute vraiment en Javascript et dire que j'ai tous compris serait un mensonge ^^, je suis totalement perdu, c'est le seul moyen de faire ça je pensais qu'il suffisais juste de stocker la variable que j'avais eu du select puis de la mettre direct dans un maxLength en mode :

-> maxlength = $nb

Après vu ce que tu as écrit je pense que ce n'est pas si simple que cela. Je vais essayez de travailler ton code pour le comprendre et les petites subtilité du Javascript (const,Map,etc..).

Merci du temps passé la dessus, j'espère que ça aidera aussi d'autre personne !

Récupérer une variable d'une fonction et de la mettre dans un maxlength d'un input.

JavaScript

Discussions similaires

Partager

Partager