Discussion :

[moimp]

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 Javascript :

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

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

[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...

[moimp]

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

[moimp]

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 javascript :

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

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

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

[moimp]

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 javascript :

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

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 javascript :

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

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 html :

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

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>