Choisir le bon événement sur le bon élément

Bonjour,
Je veux limiter la modification d'un champ de formulaire à un seul champ à la fois. Tous mes champs de formulaire sont en disabled ou readonly.
Quand je double-clique sur un champ j'autorise sa modification. Jusque là tout va bien. Par contre, je ne sais pas comment remettre la propriété readonly lorsque j'ai traité la modification.

Code:

---

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

"use strict";   const inclForm = window.document.querySelector('.displCard'), fields = window.document.querySelectorAll('.displCard input, .displCard textarea');   // Modification des champs inclForm.addEventListener('dblclick', function(e) // Fonctionne { e.target.removeAttribute('disabled'); e.target.removeAttribute('readonly'); }, false );   inclForm.addEventListener('blur', function(e) // N'est jamais appelée { alert(e.target.name); alert('xxx'); //inclForm.submit(); e.target.setAttribute('readonly', ''); }, false );

---

Ben pour le remettre tu as l'air de déjà connaitre setAttribute(), non ?


EDIT : Ah oui la fonction n'est pas exécutée car cela concerne la form et non l'élément sur lequel tu as fait un double-clique...

Pour la délégation d'événement concernant cet événement regarde ça : https://developer.mozilla.org/fr/doc...9v%C3%A9nement (j'ai testé l'exemple ici : https://jsbin.com/xukebajiqu/edit?js,output)...

---> Essaye en remplaçant "false" par "true" dans ton deuxième inclForm.addEventListener...

Merci beaucoup. J'ai essayé et tout fonctionne comme je le souhaite.

J'ai réagis trop tôt: tout ne fonctionne pas!
Les lignes 14 et 26 à 28 posent un problème. Voir les commentaires.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

const inclForm = window.document.querySelector('.displCard'), fields = window.document.querySelectorAll('.displCard input, .displCard textarea');   // Modification des champs var field;   inclForm.addEventListener('dblclick', function(e) { field = e.target; field.removeAttribute('readonly'); // Sans la ligne suivante, je suis obligé de re-cliquer sur le champ // Avec la ligne, je passe directement à la page 'editField.php' field.select(); // sans cette ligne, je suis obligé de }, false );   inclForm.addEventListener('blur', function(e) { //if ( typeof field == 'undefined' ) { return false; } //if ( typeof field != 'undefined' ) { for (let i=0, max=fields.length; i<max; i++) { if (e.target == field) { continue; } e.target.setAttribute('readonly', ''); } if ( typeof field == 'undefined' ) return false; // Sans cette ligne, le fonctionnement se rapproche de ce que je souhaite mais j'obtiens une erreur "référence nulle ou non définie" inclForm.action = 'editField.php?field='+field.name; inclForm.submit(); //} }, true );

---

Je ne sais pas exactement ce que tu veux faire* mais pourquoi tu utilises une boucle puisque tu utilises une variable globale "field" ?

Essaye de faire juste ça : field.setAttribute('readonly', ''); puisque juste avant (dans le inclForm.addEventListener('dblclick',...) tu as fait field = e.target;... Éventuellement juste avant assure toi que field n'est pas indéfini...

En plus tu mets if (e.target == field) { continue; } juste avant e.target.setAttribute('readonly', ''); donc en cas d’égalité cette dernière ligne n'est pas exécutée or l'exécuter en cas d'égalité c'est justement ce que tu veux, non ?

---> L'instruction continue te fait passer directement à la boucle suivante du coup les instructions qui la suivent ne sont pas exécutées...

Autre chose : tu n'utilises pas l'indice "i" ni la liste "fields" peut-être que tu voulais écrire if (e.target == fields[i]) {... à la place de if (e.target == field) {... ? Mais même comme ça je ne comprends pas mais peut-être que tu voulais faire un truc comme ça : if (e.target != fields[i]) {......




* Peux-tu nous donner un exemple de code HTML ?

Je reprends du départ.
J'ai un formulaire dont par défaut tous les champs ont un attribut readonly. Je veux pouvoir modifier un seul champ à la fois lorsque je clique 2 fois dessus. C'est le même principe que dans phpMyAdmin en mode affichage ou parcourir.
La procédure est la suivante:
1-Je clique deux fois sur le champ à modifier,
2-Je modifie la valeur du champ,
3-Lorsque je clique hors du champ, j'envoie le formulaire.

Voici mon code modifié:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

inclForm.addEventListener('blur', function(e) { if ( typeof field != 'undefined' ) { for (let i=0, max=fields.length; i<max; i++) { if (e.target == field) { continue; } fields[i].setAttribute('readonly', ''); } inclForm.action = 'editField.php?field='+field.name; //inclForm.submit(); } }, true );

---

J'ai aussi testé la variante suivante qui n'est jamais exécutée.

Code:

---

1 2 3 4 5 6 7 8 9 10 11

if ( typeof field != 'undefined' ) { field.addEventListener('blur', function(e) { for (let i=0, max=fields.length; i<max; i++) { if (e.target == field) { continue; } fields[i].setAttribute('readonly', ''); } }, false ); }

---

L'instruction 'continue' est bien volontaire, par contre j'ai bien une erreur dans ma boucle for. Il faut remplacer e.target.setAttribute par fields[i].setAttribute.
Malgré ces modifications mon code ne marche pas :
- Voir les commentaires en lignes 12 et 13,
- Si je clique sur une zone de texte ou sur un emplacement vide, l'attribut readonly n'est pas attribué au champ qui vient d'être modifié. Par contre, il l'est si je clique sur un champ de type input.

Exemple de code html

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<form method="post" action="" class="L displCard"> <div class="multiCols"> <div class="div1"> <strong><label><?= INCL_LBL_FIRST; ?></label><input type="text" name="prenom" value="<?= $address->prenom; ?>" readonly /></strong><br/> <p></p> <label><?= INCL_LBL_ADDR; ?></label><textarea name="adresse" cols="30" rows="3" readonly><?= $address->adresse; ?></textarea><br/> <label><?= INCL_LBL_COUNTRY; ?></label><input type="text" name="pays" value="<?= $address->pays; ?>" readonly /><br/> <label><?= INCL_LBL_CP; ?></label><input type="text" name="cp" value="<?= $address->cp; ?>" readonly /><br/> <label><?= INCL_LBL_LOCALITY; ?></label><input type="text" name="ville" value="<?= $address->ville; ?>" readonly /><br/> </div> <div class="div2"> <strong><label><?= INCL_LBL_LAST; ?></label><input type="text" name="nom" value="<?= $address->nom; ?>" readonly /></strong><br/> <p></p> <label><?= INCL_LBL_HOME; ?></label><input type="text" name="tel_domicile" value="<?= $address->tel_domicile; ?>" readonly /><br/> <label><?= INCL_LBL_GSM; ?></label><input type="text" name="tel_portable" value="<?= $address->tel_portable; ?>" readonly /><br/> <label><?= INCL_LBL_WORK; ?></label><input type="text" name="tel_travail" value="<?= $address->tel_travail; ?>" readonly /><br/> <label><?= mailtoLbl($address->courriel); ?></label><input type="text" name="courriel" value="<?= $address->courriel; ?>" readonly /><br/> </div> </div> <div style="margin-top:10px;margin-left:20px;"> <label><?= INCL_LBL_NOTES; ?></label><textarea name="notes" style="width:500px" readonly><?= $address->notes; ?></textarea><br/> <label><?= INCL_LBL_UPDATE; ?></label><input type="text" name="update_date" value="<?= $address->update_date; ?>" readonly /><br/> </div> </form>

---

Bonjour,
pourquoi te compliques tu la vie !?!

Il te suffit de définir 2 fonctions décrivant ce que tu veux faire sur les événements ondblclick et onblur

Code:

---

1 2 3 4 5 6 7

function handleOnDblClick() { this.removeAttribute("readonly"); }   function handleOnBlur() { this.setAttribute("readonly", "readonly"); }

---

ensuite tu les affectes simplement à tous les éléments concernés, par exemple

Code:

---

1 2 3 4 5 6 7 8

var oElements = document.querySelectorAll("[readonly]"); var i; var oElem; var nbr = oElements.length; for (i = 0; i < nbr; i += 1) { oElements[i].ondblclick = handleOnDblClick; oElements[i].onblur = handleOnBlur; }

---

Salut,

Cela ne me parait être une bonne idée de conditionner (avec le if..) l'ajout d'un listener mais bon pour la boucle je ne suis pas sûr qu'elle fasse ce que tu crois : pour moi elle ajoute l'attribut 'readonly' à tous les éléments contenu dans fields sauf field or ils ont déjà cet attribut par défaut et le seul qui perd cet attribut lors d'un double clique c'est field justement...

De plus la condition if (e.target == field) { continue; } n'a pas de sens au début de la boucle car si elle est vrai alors elle l'est quelque soit la valeur de l'indice i donc dans ce cas la boucle ne fait rien d'autre que boucler...

Moi je pensais que tu voulais remettre l'attribut 'readonly' seulement à l’élément qui le perd juste avant lors du double clique (les autres éléments sur lesquels on n'a pas fait un double clique conservent cet attribut).

Bon j'ai peut-être mal compris mais peut-être que dans ce cas éviter la délégation d’événements et ajouter un listener à chaque élément est préférable (cf. la réponse de NoSmoking).

Bonjour et merci.
J'ai essayé de tenir compte des remarques de Beginner. et je ne m'en suis pas sorti, surtout après avoir vu que les éléments sélectionnés ne correspondaient pas à ce que j'attendais et la boucle tournait en grande partie inutilement.

Je suis ensuite passé à la solution de NoSmoking qui me paraît plus simple et plus rationnelle que celle que j'avais imaginée initialement. Là, je rencontre les problèmes suivants:
Après le double-clic:

• le champ perd le style que j'ai défini pour l'attribut readonly, mais il n'est pas modifiable. Bizarrement cet attribut est visible lors de l'affichage du code source mais ne l'est pas dans l'explorateur DOM.
• logiquement l'événement blur devrait intervenir lorsque je clique en dehors du champ en cours d'édition or il intervient justement lorsque je clique sur ce champ et ne se produit pas lorsque je clique ailleurs.

EDIT: Pourquoi ne met-on pas de parenthèses dans l'appel de fonction et pourquoi, si on en met, on a une erreur référence nulle ou indéfinie? J'ai lu ceci mais je n'ai pas bien compris l'histoire de la référence.

Citation:

---

Envoyé par moimp

J'ai essayé de tenir compte des remarques de Beginner. et je ne m'en suis pas sorti, surtout après avoir vu que les éléments sélectionnés ne correspondaient pas à ce que j'attendais et la boucle tournait en grande partie inutilement.

---

Ben encore une fois tu n'avais pas besoin de boucle, je t'avais proposé une solution simple utilisant la variable globale field mais bon passons à l'autre solution...

Citation:

---

Envoyé par moimp

Après le double-clic:

• le champ perd le style que j'ai défini pour l'attribut readonly, mais il n'est pas modifiable. Bizarrement cet attribut est visible lors de l'affichage du code source mais ne l'est pas dans l'explorateur DOM.

---

Ben c'est normal que le style ne soit plus appliqué puisque tu supprimes l'attribut "readonly" au double-clique. Ensuite ce n'est pas le code source qui importe mais le code modifiée dynamiquement, celui que tu vois dans l'explorateur. Ce n'est pas bizarre qu'il y ait une différence puisque le code source est chargé au départ puis il peut être modifié par du code JS (dynamiquement).

Citation:

---

Envoyé par moimp

logiquement l'événement blur devrait intervenir lorsque je clique en dehors du champ en cours d'édition or il intervient justement lorsque je clique sur ce champ et ne se produit pas lorsque je clique ailleurs.

---

Ben pourrais-tu poster le code que tu as utilisé ?

Ah oui j'ai remarqué un problème avec Chrome qu'on a pas avec FF lors du double-clique, c'est vrai qu'on ne peut tout de suite modifié la input ou la textearea, peut-être qu'il serait préférable de choisir autre chose que le double-clique ?

Tu utilises quel navigateur ?

Citation:

---

Envoyé par Beginner.

Ben encore une fois tu n'avais pas besoin de boucle, je t'avais proposé une solution simple utilisant la variable globale field mais bon passons à l'autre solution...

---

Justement, j'ai essayé de travailler sans la boucle et je ne m'en suis pas sorti.

Citation:

---

Envoyé par Beginner.

Ben c'est normal que le style ne soit plus appliqué puisque tu supprimes l'attribut "readonly" au double-clique. Ensuite ce n'est pas le code source qui importe mais le code modifiée dynamiquement, celui que tu vois dans l'explorateur. Ce n'est pas bizarre qu'il y ait une différence puisque le code source est chargé au départ puis il peut être modifié par du code JS (dynamiquement).

---

D'accord, je comprends mieux. On peut donc plus ou moins 'oublier' le code source.

Citation:

---

Envoyé par Beginner.

Ben pourrais-tu poster le code que tu as utilisé ?

---

J'ai initialement testé le code de NoSmoking sans changement. J'ai ensuite modifié la définition de la constante fields pour lever une ambiguïté sur le formulaire à traiter et le nom des variables pour reprendre les miennes et pour intégrer les variables de boucles dans la boucle. Je n'ai décelé aucune différence de fonctionnement entre les deux versions.

Code:

---

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

"use strict";   const footForm = window.document.querySelector('.footForm'), inclForm = window.document.querySelector('.displCard'), fields = window.document.querySelectorAll('.displCard [readonly]');   function handleOnDblClick() { this.removeAttribute("readonly"); }   function handleOnBlur() { this.setAttribute("readonly", "readonly"); }   for (let i=0, max=fields.length; i<max; i++) { fields[i].ondblclick = handleOnDblClick; fields[i].onblur = handleOnBlur; }

---

Citation:

---

Envoyé par moimp

EDIT: Pourquoi ne met-on pas de parenthèses dans l'appel de fonction et pourquoi, si on en met, on a une erreur référence nulle ou indéfinie?

---

Ben si justement pour appeler (exécuter) une fonction on doit mettre les parenthèses...

EDIT : Ah oui tu as rajouté une partie :

Citation:

---

Envoyé par moimp

... J'ai lu ceci mais je n'ai pas bien compris l'histoire de la référence.

---

Alors oui il y a le nom d'une fonction et l'exécution d'une fonction :

- Le nom de la fonction + les parenthèses ---> exécution.

Donc quand tu fait par exemple : var res = maFonction() ; tu exécutes la fonction "maFonction" et le résultat retourné par cette fonction sera affecté à la variable "res" et si la fonction ne retourne rien alors c'est "undefined" qui sera affecté à la variable res.

- Par contre si tu fait ça : var res = maFonction ; tu n'exécutes pas la fonction "maFonction", tu affectes à la variable "res" la référence à cette fonction. Ce qui signifie que "res" et "maFonction" pointe vers la même référence du coup tu peux exécuter la fonction en faisant res() ou maFonction() cela fera la même chose.

Je viens de tester le code et chez moi cela fonctionne, les évènements sont bien déclenchés comme il faut...

Par contre sur Chrome il y a un "bug" : au double clique l'attribut "readonly" est bien supprimé mais je ne peux pas modifier le contenu de la textearea par contre ça marche bien avec les input.

#13: Merci pour tes explications. Je comprends mieux.
#14: Sur IE11 comme sur Firefox, j'ai les problèmes que j'ai cités, à savoir que je ne peux pas modifier la valeur, ce qui est le but essentiel de la manip.

EDIT: Je rappelle que mon but est de réaliser toute la procédure décrite en #6.

Citation:

---

Envoyé par moimp

EDIT: Je rappelle que mon but est de réaliser toute la procédure décrite en #6.

---

Oui alors les deux premiers points fonctionnent chez moi (sauf pour les textearea avec Chrome) :

1-Je clique deux fois sur le champ à modifier,
2-Je modifie la valeur du champ,

Chez toi ces deux points buguent ?

En réalisant un test simple je n'ai rencontrer qu'un soucis et ce quelque soit le navigateur de test.

Si le champ contient déjà du texte, au double clic une partie est sélectionnée et la saisie est réalisable.

Si par contre le champ est vide alors il faut effectivement re-cliquer pour pouvoir commencer la saisie. Dans ce cas en ajoutant un this.select() le problème disparait.

Code:

---

1 2 3 4

function handleOnDblClick() { this.removeAttribute("readonly"); this.select(); }

---

Nota : l'ergonomie me parait quand même capillotractée.

Avec IE11:
1- La propriété readonly est bien enlevée (n'apparaît plus dans l'explorateur),
2- Le contenu est sélectionné mais n'est pas remplacé lors de la saisie.

Avec FF:
1- idem qu'avec IE,
2- Le contenu n'est pas sélectionné mais la saisie reste inopérante.

Je pense que l'événement blur n'est pas approprié parce qu'il se produit lorsque je clique à nouveau sur le champ en cours. Ne devrait il pas au contraire se produire lorsque je clique en dehors?

Tu as visiblement autre chose qui te gâche la vie.

Essaie ce simple fichier :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Test formulaire</title> <style> html, body {   margin: 0;   padding: 0;   font: 1em/1.5 Verdana; } h1, h2, h3 {   color: #069; } section {   margin: auto;   max-width: 60em; } form {   margin: 2em; } fieldset {   display: inline-block;   padding: 1em;   border: 1px solid #CCC; } legend {   font-weight: 700;   color: #069; } label {   display: block; } input, textarea {   border: 1px solid #CCC;   font: inherit;   resize: none; } [readonly] {   background: #EFE; } </style> </head> <body> <section> <h1>Test formulaire</h1> <form method="post" action="get" class="displcard"> <fieldset> <legend>Champs préremplis</legend> <p> <label>Nom</label> <input type="text" name="nom" value="Nom" readonly> </p> <p> <label>Prénom</label> <input type="text" name="prenom" value="Prenom" readonly> </p> <p> <label>Message</label> <textarea name="message" cols="30" rows="3" readonly>Texte du message</textarea> </p> </fieldset> <fieldset> <legend>Champs vides</legend> <p> <label>Nom</label> <input type="text" name="autre-nom" value="" readonly> </p> <p> <label>Prénom</label> <input type="text" name="autre-prenom" value="" readonly> </p> <p> <label>Message</label> <textarea name="autre-message" cols="30" rows="3" readonly></textarea> </p> </fieldset> </form> </section> <script> "use strict"; function handleOnDblClick() {   this.removeAttribute("readonly");   this.select(); }   function handleOnBlur() {   this.setAttribute("readonly", "readonly"); }   var oElements = document.querySelectorAll("form [readonly]"); var i; var nbr = oElements.length; for (i = 0; i < nbr; i += 1) {   oElements[i].ondblclick = handleOnDblClick;   oElements[i].onblur = handleOnBlur; } </script> </body> </html>

---

J'ai testé le "simple fichier" de NoSmoking et effectivement je n'ai pas le problème que j'ai eu avec l'autre code HTML, celui du message #6, peut-être à cause de certaines balises comme <?= INCL_LBL_ADDR; ?> ?

Avec le "simple fichier", j'ai parfois un petit problème, je reviens vers une page de mon site qui n'a rien à voir. A éclaircir mais pour l'instant, c'est secondaire. Sinon le fonctionnement est bon. Merci.
Je vais donc reprendre mes fichiers en ajoutant progressivement des portions de code de façon à déterminer d'où proviennent mes difficultés.

Question annexe: Pourquoi tu ne refermes pas tes balises input par /> au lieu du simple chevron?

Citation:

---

Envoyé par moimp

Je vais donc reprendre mes fichiers en ajoutant progressivement des portions de code de façon à déterminer d'où proviennent mes difficultés.

---

Je ne m'en sors pas ce qui m'amène à me poser une autre question de bonne pratique:
Mon site est conçu de la façon suivante:
J'ai une page parentPage.php qui contient:

• un code PHP commun (avec l'ouverture des sessions, l'appel automatique des classes, etc),
• le menu,
• la balise head,
• un pied de page

En fonction du menu, j'inclus dans cette page des pages enfants (premier niveau)
Certaines pages enfants sont conçues avec des onglets qui permettent d'afficher différentes parties de formulaires.

Cette arborescence est séduisante car elle permet de n'écrire qu'un code minimum et facilite la maintenance mais elle complique à outrance la mise au point du code.

Est-ce qu'il ne serait pas mieux d'avoir des pages indépendantes et d'y inclure les parties communes?

Citation:

---

Envoyé par moimp

Question annexe: Pourquoi tu ne refermes pas tes balises input par /> au lieu du simple chevron?

---

C'est autorisé en HTML5 mais si tu veux conserver l'écriture stricte du XML alors il te faut la conserver pour tout le document ;)

Citation:

---

Je ne m'en sors pas ce qui m'amène à me poser une autre question de bonne pratique:

---

Attention ceci est un autre problème qui mérite l'ouverture d'une autre discussion.

Citation:

---

Envoyé par NoSmoking

Tu as visiblement autre chose qui te gâche la vie.

---

Effectivement, j'ai une interférence avec un autre script baptisé 'common.js'. Le problème est que je ne vois pas comment combiner les deux, d'autant que 'common.js' sert à lever un bug de IE. Ce bug fait que lorsqu'on clique sur un champ readonly et qu'on active certaines touches (comme backspace mais je ne suis pas sûr que ce soit le seul cas), on revient à la page précédente.
J'ai imaginé remplacer l'attribut readonly par disabled mais dans ce cas je ne peux plus faire de double-clic. Pourtant ça m'aurait arrangé car ça m'aurait aussi permis de l'utiliser sur des balises select.
Et voici le code de common.js:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

"use strict";   // Correction d'un bug de certains navigateurs (testé avec IE11, à vérifier sur les autres versions et les autres navigateurs) var reads = document.querySelectorAll('input[readonly]'), others = document.querySelectorAll('input:not([readonly]):not([type="submit"]):not([disabled])'), n = reads.length; for (let i=0; i<n; i++) { reads[i].addEventListener('focus', function(e) { this.blur(); if (others.length) others[0].focus(); }, false); }

---

Il faut bien admettre qu'avec un tel script il est logique que tu ais des soucis :aie:

Mon conseil, supprime le purement et simplement ;)