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

Version imprimable

Voir 40 message(s) de cette discussion en une page

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 );

27/01/2019, 19h05
Beginner.

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...
28/01/2019, 09h48
moimp

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 );

28/01/2019, 12h17
Beginner.

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; }

29/01/2019, 10h12
Beginner.

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).
29/01/2019, 15h24
moimp
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.
29/01/2019, 15h47
Beginner.
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é ?
29/01/2019, 15h52
Beginner.

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; }

29/01/2019, 16h17
Beginner.

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.
29/01/2019, 16h58
Beginner.

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.
29/01/2019, 17h17
moimp

#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.
29/01/2019, 18h39
Beginner.

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 ?
29/01/2019, 18h55
NoSmoking
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.
29/01/2019, 19h07
moimp

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>

30/01/2019, 10h43
Beginner.

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; ?> ?

Voir 40 message(s) de cette discussion en une page