Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    682
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 682
    Points : 359
    Points
    359

    Par défaut Fonction onclick appelée intempestivement

    Bonjour,
    Lorsque je clique sur un emplacement aléatoire en dehors du bouton qui déclenche normalement l’événement la fonction définie dans le onclick est appelée. Ce n'est pas systématique et je n'arrive pas à discerner les cas où ceci se produit. Je pense qu'il y a une interférence avec un autre script. J'ai pensé remplacer cette appel par un écouteur pour contrôler l'événement déclencheur mais dans ce cas, je ne sais pas comment transmettre l'argument de la fonction.
    Source 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
    25
    26
    27
    28
    29
    <form method='post' action="" class="L displCard" style="padding:5px 10px;">
    	<input type="hidden" name="id" value="120" />
    	<fieldset><legend>Conjoint</legend>
    		<p class="note">Vous pouvez modifier les champs grisés après avoir fait un double clic dessus.</p>
    	<div class="multiCols">
    		<div class="div1" style="margin:0;">
    			<label>Prénom</label><input type="text" name="prenom" value="Nathalie" readonly /><br/>
    			<label>Nom</label><input type="text" name="nom" value="Xxx" readonly /><br/>
    		</div>
    		<div class="div2">
    			<label>Tél. portable</label><input type="text" name="tel_portable" value="" readonly /><br/>
    			<label>Tél. travail</label><input type="text" name="tel_travail" value="" readonly /><br/>
    			<label>Courriel</label><input type="text" name="courriel" value="" readonly /><br/>
    		</div>
    	</div>
    	<!-- Appel de la page delFamilyMember.php -->
    	<p style="width:480px;" class="center"><input type="submit" id='del' value="Effacer" onclick='confirmBeforeDel({"id":"251","prenom":"Nathalie","nom":"Xxx","courriel":null,"tel_travail":null,"tel_portable":null})' /></p>
    		</fieldset>
    	<fieldset><legend>Enfants</legend>
    		<p class="note">Les lignes en italiques correspondent aux enfants du conjoint.</p>
    		<table>
    			<thead><tr><th>Prénom</th><th>Nom</th><th>Date de naissance</th><th>Tél. portable</th><th>Tél. travail</th><th>Courriel</th><th></th><th></th><td></td></tr></thead><tbody><tr><td colspan="9" style='text-align:center;'><i>Ce tableau ne contient aucune information.</i></td></tr></tbody>			<tr><td colspan="9" class="center"><input type="submit" value="Nouveau" formaction="parentPage.php?childPageKey=6&relation=9" /></td></tr>
    		</table>
    	</fieldset>
    </form>
     
    <script>
            const message   = "Etes-vous sûr de vouloir effacer %s*?";
    </script>
    Dans cet exemple, le tableau est vide mais lorsqu'il ne l'est pas, il contient un td comme ceci:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <td><img src='del.png' onclick='confirmBeforeDel(" . json_encode($child) . ")' /></td>
    Fichier JavaScript:
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    "use strict";
     
    const mainForm	= document.querySelector('.displCard');
     
    // Effacement d'un membre de la famille
    function confirmBeforeDel(person) {
    	if ( confirm(message.replace('%s', person.prenom+' '+person.nom)) ) {
    		mainForm.action = "delFamilyMember.php?id="+person.id;
    		mainForm.submit();
    	}
    }

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 068
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 068
    Points : 28 427
    Points
    28 427

    Par défaut

    Bonjour,

    si tu ne montres pas une page en ligne (qu'on puisse tester), ça va être difficile d'identifier le problème.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    682
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 682
    Points : 359
    Points
    359

    Par défaut

    Déjà, j'ai indiqué qu'il pouvait y avoir interférence avec un autre script sans le joindre. Donc le voici. J'ai des doutes sur l'événement onblur.
    Code : 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
    31
    32
    33
    34
    35
    36
     
    "use strict";
     
    const
    	inclForm		= document.querySelector('.displCard')
    	, inputs		= document.querySelectorAll('.displCard input:not([name=\'pays\']), .displCard textarea')
    	;
     
    // Modification des champs
    // #######################
     
    function handleOnDblClick() {
    	this.readOnly = false;
    	this.select();
    }
     
    function handleOnBlur() {
    	this.readOnly = true;
    	inclForm.action = 'editField.php?field='+this.name;
    	inclForm.submit();
    }
     
    function handleKeyDown(e) {
    	if ( e.keyCode == 8 && this.hasAttribute('readonly') ) { e.preventDefault(); }
    	if ( e.keyCode == 13 && this.type != 'textarea' ) {
    		inclForm.action = 'editField.php?field='+this.name;
    		inclForm.submit();
    	}
    }
     
    for (let i=0, max=inputs.length; i<max; i++) {
    	if ( inputs[i].type == 'submit' ) continue;
    	inputs[i].ondblclick	= handleOnDblClick;
    	inputs[i].onblur		= handleOnBlur;
    	inputs[i].onkeydown		= handleKeyDown;
    }
    Citation Envoyé par jreaux62 Voir le message
    Bonjour,
    si tu ne montres pas une page en ligne (qu'on puisse tester), ça va être difficile d'identifier le problème.
    Là, ça va être un peu plus long, car le site n'est pas en production et il faut que je fasse une maquette.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 194
    Points : 65 421
    Points
    65 421
    Billets dans le blog
    1

    Par défaut

    ça peut être une question d'imbrication de balise => du coup il faudra stopper la propagation
    ça peut être une balise mal fermée ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  5. #5
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    682
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 682
    Points : 359
    Points
    359

    Par défaut

    Citation Envoyé par SpaceFrog Voir le message
    ça peut être une question d'imbrication de balise => du coup il faudra stopper la propagation
    J'ai essayé mais du coup mon code ne fonctionne plus sur double clic sur un champ. Je pense que je n'ai pas arrêter la propagation correctement ou au bon endroit.

    Citation Envoyé par SpaceFrog Voir le message
    ça peut être une balise mal fermée ...
    J'ai passé mon code au validateur W3C, ce qui m'a effectivement permis de repérer des balises non refermées dans d'autres parties du code. Malheureusement cette vérification et ces corrections n'ont eu aucune influence sur mon problème actuel.

    Premier fichier commun:
    Code : 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
    31
    32
    33
    34
    35
    36
    37
    "use strict";
     
    const
    	inclForm		= document.querySelector('.displCard')
    	, inputs		= document.querySelectorAll('.displCard input:not([name=\'pays\']), .displCard textarea')
    	;
     
    // Modification des champs
    // #######################
     
    function handleOnDblClick() {
    	this.readOnly = false;
    	this.select();
    }
     
    function handleOnBlur() {
    	this.readOnly = true;
    	this.event.stopPropagation(); // Nouvelle ligne
    	inclForm.action = 'editField.php?field='+this.name;
    	inclForm.submit();
    }
     
    function handleKeyDown(e) {
    	if ( e.keyCode == 8 && this.hasAttribute('readonly') ) { e.preventDefault(); }
    	if ( e.keyCode == 13 && this.type != 'textarea' ) {
    		this.event.stopPropagation(); // Nouvelle ligne
    		inclForm.action = 'editField.php?field='+this.name;
    		inclForm.submit();
    	}
    }
     
    for (let i=0, max=inputs.length; i<max; i++) {
    	if ( inputs[i].type == 'submit' ) continue;
    	inputs[i].ondblclick	= handleOnDblClick;
    	inputs[i].onblur		= handleOnBlur;
    	inputs[i].onkeydown		= handleKeyDown;
    }
    Fichier propre à la page:
    Code : 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
    "use strict";
     
    const
    	mainForm	= document.querySelector('.displCard');
     
    // Modification des enfants
    function callEditFamilyMember(id, relation) {
    	mainForm.action = "parentPage.php?childPageKey=6&id="+id+"&relation="+relation;
    	mainForm.submit();
    }
     
    // Effacement d'un membre de la famille
    function confirmBeforeDel(person) {
    	this.event.stopPropagation(); // Nouvelle ligne
    	if ( confirm(message.replace('%s', person.prenom+' '+person.nom)) ) {
    		mainForm.action = "delFamilyMember.php?id="+person.id;
    		mainForm.submit();
    	}
    }

  6. #6
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    682
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 682
    Points : 359
    Points
    359

    Par défaut

    Je complète pour @jreaux62.
    Citation Envoyé par jreaux62 Voir le message
    si tu ne montres pas une page en ligne (qu'on puisse tester), ça va être difficile d'identifier le problème.
    La mise en ligne est retardée par cette autre question.

  7. #7
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    682
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 682
    Points : 359
    Points
    359

    Par défaut

    Bonjour,

    La version standard de mon site est maintenant en ligne.
    Il est accessible ici.
    • Identifiants de connexion: 'test', mot de passe: ';a012Z'.
    • Puis menu 'Fiche' -> onglet 'famille'.


    On constate l'affichage du message de suppression si on fait ceci:
    • Double clic sur le champ sur un champ de téléphone
    • Modification du numéro
    • Confirmation en cliquant à l'extérieur du champ ou en validant par appui sur la touche 'Entrée'
    • Si dans le message de confirmation, on clique sur OK, l'enregistrement est effacé

  8. #8
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 068
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 068
    Points : 28 427
    Points
    28 427

    Par défaut

    Bonjour,

    il s'agit ici de MODIFIER un champ :
    • je suis allé jusque cliquer la touche 'Entrée',
    • la popup s'ouvre bien...
    • ...mais elle se referme tout de suite !! (sans que j'ai le temps de cliquer sur quoi que ce soit).
    • de plus, la popup affiche "Voulez-vous supprimer ...... ?"

    Il y a un VRAI problème....

    Tu as dû t'emmêler les pinceaux en écrivant les noms des fonctions à appeler dans ton code JS.

    A mon avis : tu as voulu faire des fonctions JS "fourre-tout".
    Ça ne peut pas marcher.

    Il faut au moins distinguer le type d'action à effectuer.
    Par exemple avec un data-action :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <input ...... data-action="edit" />
    <input ...... data-action="delete" />
    ...
    [EDIT] A priori, le problème ne survient QUE quand on clique la touche 'Entrée'.
    (pas quand on clique en dehors de l'input)
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  9. #9
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    682
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 682
    Points : 359
    Points
    359

    Par défaut

    Citation Envoyé par jreaux62 Voir le message
    il s'agit ici de MODIFIER un champ :
    • je suis allé jusque cliquer la touche 'Entrée',
    • la popup s'ouvre bien...
    • ...mais elle se referme tout de suite !! (sans que j'ai le temps de cliquer sur quoi que ce soit).
    • de plus, la popup affiche "Voulez-vous supprimer ...... ?"

    Il y a un VRAI problème....
    C'est clair! Mais chez moi la popup reste affichée.

    Citation Envoyé par jreaux62 Voir le message
    Tu as dû t'emmêler les pinceaux en écrivant les noms des fonctions à appeler dans ton code JS.
    A mon avis : tu as voulu faire des fonctions JS "fourre-tout".
    Ça ne peut pas marcher.
    Je joins les codes répartis sur deux fichiers à la fin de ce message pour que tu puisses juger.

    Citation Envoyé par jreaux62 Voir le message
    Il faut au moins distinguer le type d'action à effectuer.
    Par exemple avec un data-action :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <input ...... data-action="edit" />
    <input ...... data-action="delete" />
    ...
    Ici je rencontre un problème. Le data_action='delete' figure en deux endroits sur les lignes suivantes. Mais seul le input est détecté dans la définition de variables delElements (voir fichiers family.js ci-dessous, ligne 15).
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    "<img src='".DIR_IMAGES."del.png' title='" . IMG_TITLE_ERASE . "' data-action='delete' onclick='confirmBeforeDel(" . json_encode($child) . ")' />" // Image de suppression d'un enfant. Ligne créée en PHP
    <p style="width:480px;" class="center"><input type="submit" id='del' data-action="delete" value="<?= BTN_DEL; ?>" onclick='confirmBeforeDel(<?= json_encode($joined); ?>)' /></p> // Bouton de suppression du conjoint.
    Citation Envoyé par jreaux62 Voir le message
    [EDIT] A priori, le problème ne survient QUE quand on clique la touche 'Entrée'.
    (pas quand on clique en dehors de l'input)
    Il semble que ce soit le cas, mais je ne suis pas sûr que ce soit systématique.

    Ci-dessous: codes js, en deux fichiers. Le premier est commun aux deux premiers onglets de formulaires et sert à la modification des champs. Le second sert à l'appel des fichiers de suppression et d'édition
    Code common.js : 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
    31
    32
    33
    34
    35
    36
     
    // Modification des champs
    // #######################
     
    "use strict";
     
    const
    	inclForm		= document.querySelector('.displCard')
    	, inputs		= document.querySelectorAll('.displCard input:not([name=\'pays\']), .displCard textarea')
    	;
     
    function handleOnDblClick() {
    	this.readOnly = false;
    	this.select();
    }
     
    function handleOnBlur() {
    	this.readOnly = true;
    	inclForm.action = 'editField.php?field='+this.name;
    	inclForm.submit();
    }
     
    function handleKeyDown(e) {
    	if ( e.keyCode == 8 && this.hasAttribute('readonly') ) { e.preventDefault(); }
    	if ( e.keyCode == 13 && this.type != 'textarea' ) {
    		inclForm.action = 'editField.php?field='+this.name;
    		inclForm.submit();
    	}
    }
     
    for (let i=0, max=inputs.length; i<max; i++) {
    	if ( inputs[i].type == 'submit' ) continue;
    	inputs[i].ondblclick	= handleOnDblClick;
    	inputs[i].onblur		= handleOnBlur;
    	inputs[i].onkeydown		= handleKeyDown;
    }
    Code family.js : 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
     
    "use strict";
     
    const
    	  mainForm		= document.querySelector('.displCard')
    	, delElements	= document.querySelectorAll("[data-action='delete']")
    	;
     
    // Modification des enfants
    function callEditFamilyMember(id, relation) {
    	mainForm.action = "parentPage.php?childPageKey=6&id="+id+"&relation="+relation;
    	mainForm.submit();
    }
     
    console.log(delElements);
    // Effacement d'un membre de la famille
    function confirmBeforeDel(person) {
    	if ( confirm(message.replace('%s', person.prenom+' '+person.nom)) ) {
    		mainForm.action = "delFamilyMember.php?id="+person.id;
    		mainForm.submit();
    	}
    }

  10. #10
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    682
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 682
    Points : 359
    Points
    359

    Par défaut

    J'ai localisé l'erreur mais je n'arrive pas à la prévenir:
    Dans mon fichier common.js à la ligne 9, il faudrait ne sélectionner que les éléments qui ont l'attribut readonly mais je n'arrive pas à l'intégrer dans mon expression css de façon compatible avec tous les navigateurs. De plus je ne suis pas sûr que lorsque cet attribut change de façon dynamique cette sélection de nœuds soit fiable.
    Si ça ne marche pas, j'ajouterai un data-editable=true comme tu me l'as indiqué mais je trouve un peu bête de répéter cet attribut sur tous les champs qui ont déjà l'attribut readonly puisque ce sont exactement les mêmes.

  11. #11
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 068
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 068
    Points : 28 427
    Points
    28 427

    Par défaut

    Bonjour,

    Citation Envoyé par moimp Voir le message
    ...je trouve un peu bête de répéter cet attribut sur tous les champs qui ont déjà l'attribut readonly puisque ce sont exactement les mêmes....
    1- Ce que j'ai appelé "fonctions fourre-tout", ce sont justement tes "fonctions génériques".

    Tu fais une généralités sur les input readonly.
    Or, ce n'est pas parce qu'un input a l'attribut readonly qu'il sera "forcément modifiable".

    D'autre part, ces input n'ont pas forcément besoin d'être en type="submit" non plus !
    Ni même d'être des <input> ! (quid d'un <select>* ou <textarea> ?)

    N.B. Pour le <select> (qui n'accepte pas readonly), on en avait parlé dans une autre discussion (astuce avec disabled sur les <option> non-sélectionnées).


    2- Si tu veux vraiment maitriser ce que tu fais, il est préférable de spécifier / identifier les input/button/a ou autres, sur lesquels tu mets des évènements spécifiques.
    Avec une classe, notamment.

    Voilà un exemple, sans ambiguité :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <input type="text" name="machin" value="machin" class="field-editable" readonly="readonly" />
    <input type="text" name="bidule" value="bidule" class="field-editable" readonly="readonly" />
    <textarea class="field-editable" readonly="readonly">Hello the World</textarea>

    Il suffit ensuite d'utiliser querySelectorAll / addEventListener sur la classe "field-editable".
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const fields_editable = Array.from(document.querySelectorAll(".field-editable"));
    fields_editable.forEach(function(field) {
      field.addEventListener("dblclick", function() {
        handleOnDblClick(field);
      });
    });
     
    function handleOnDblClick(elt) {
      elt.readOnly = false; // pour <input> et <textarea>
      elt.select();
    }
    On peut aussi passer des paramètres avec un data-person, par exemple.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  12. #12
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    682
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 682
    Points : 359
    Points
    359

    Par défaut

    Bonjour,
    Je rencontre deux difficultés avec ton exemple:
    • IE n'accepte pas Array.from (1) et je ne veux pas faire l'impasse sur le navigateur le plus répandu.
    • J'ai essayé de ruser avec une boucle for mais je maîtrise très mal les fonctions anonymes.

    (1) J'ai vu qu'il existait un polyfill, mais je trouve que ça complique le code, alors si je peux m'en passer...

    Voici mon code:
    Code : 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
     
    "use strict";
     
    // Modification des champs
    // #######################
     
    const editableFields = document.querySelectorAll("[data-action='edit']");
     
    for (let i=0, max=editableFields.length; i<max; i++) {
    	(function(field) {
    		field.addEventListener('dblclick', function() {
    			field.readOnly = false;
    			field.select();
    		});
    	});
    }

  13. #13
    Expert confirmé Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 742
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 742
    Points : 5 847
    Points
    5 847

    Par défaut

    Citation Envoyé par moimp Voir le message
    IE n'accepte pas Array.from
    Quelle version d’IE ?

    et je ne veux pas faire l'impasse sur le navigateur le plus répandu.
    Je crois que j’entends des employés de Google qui rigolent.

    (1) J'ai vu qu'il existait un polyfill, mais je trouve que ça complique le code, alors si je peux m'en passer...
    En fait le but du polyfill c’est juste de coller un bout de code au début de ton fichier, ou dans un autre fichier, pour te simplifier la vie. Mais si tu préfères, tu peux toujours…
    ruser avec une boucle for
    Actuellement, dans ta boucle, tu définis une fonction anonyme mais tu ne l’appelles pas.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    for ( ... ) {
    	(uneFonctionAnonyme);
    }
    Ce qui manque c’est les parenthèses d’appel, et l’argument qui va avec :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    for ( ... ) {
      (uneFonctionAnonyme)(argument);
    }
    Cet argument c’est editableFields[i]. Au final, ça donne ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    for (let i=0, max=editableFields.length; i<max; i++) {
    	(function(field) {
    		field.addEventListener('dblclick', function() {
    			field.readOnly = false;
    			field.select();
    		});
    	})(editableFields[i]);
    }
    Il y a quelques années j’ai écrit un article à propos des différentes façons de faire des boucles, je pense que ça devrait t’intéresser : forEach et les collections DOM.
    La FAQ JavaScript – Les cours JavaScript
    Un article du MDN n’a pas de version française ? Je peux peut-être le traduire, envoyez-moi un MP

    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  14. #14
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    682
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 682
    Points : 359
    Points
    359

    Par défaut

    Tout d'abord un grand merci à vous deux !
    Citation Envoyé par Watilin Voir le message
    Quelle version d’IE ?
    J'ai testé sur IE11, mais MDN indique NON sans préciser la version, ce qui d'après moi sous-entend toutes les versions.

    Citation Envoyé par Watilin Voir le message
    Actuellement, dans ta boucle, tu définis une fonction anonyme mais tu ne l’appelles pas.
    Ce qui manque c’est les parenthèses d’appel, et l’argument qui va avec :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    for ( ... ) {
      (uneFonctionAnonyme)(argument);
    }
    Vu, merci.

    Citation Envoyé par Watilin Voir le message
    Cet argument c’est editableFields[i]. Au final, ça donne ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    for (let i=0, max=editableFields.length; i<max; i++) {
    	(function(field) {
    		field.addEventListener('dblclick', function() {
    			field.readOnly = false;
    			field.select();
    		});
    	})(editableFields[i]);
    }
    Ton exemple m'a bien aidé, je l'ai transposé pour tous mes cas d'application.

    Citation Envoyé par Watilin Voir le message
    Il y a quelques années j’ai écrit un article à propos des différentes façons de faire des boucles, je pense que ça devrait t’intéresser : forEach et les collections DOM.
    Maintenant que mon appli marche je ne vais pas manquer de le regarder.

  15. #15
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 373
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 373
    Points : 32 490
    Points
    32 490

    Par défaut

    Bonjour,
    indépendamment de la méthode utilisée pour les boucles

    pourquoi utiliser une closure !?!
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    for (let i = 0, max = editableFields.length; i < max; i++) {
      (function(field) {
        field.addEventListener('dblclick', function() {
          field.readOnly = false;
          field.select();
        });
      })(editableFields[i]);
    }
    et ne pas faire simplement, le this correspondant à l'élément ayant déclenché l'événement
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    for (let i = 0, max = editableFields.length; i < max; i++) {
      editableFields[i].addEventListener('dblclick', function() {
        this.readOnly = false;
        this.select();
      }, false);
    }
    ou en ne définissant qu'une seule fois la fonction pour éviter de créer une nouvelle fonction anonyme à chaque itération
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    function handleOnDblClick() {
      this.readOnly = false;
      this.select();
    }
    for (let i = 0, max = editableFields.length; i < max; i++) {
      // on passe ici la référence à la fonction
      editableFields[i].addEventListener('dblclick', handleOnDblClick, false);
    }
    ...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Appel de fonction 'onclick'
    Par moimp dans le forum Langage
    Réponses: 3
    Dernier message: 20/02/2019, 15h29
  2. [2.x] Appel fonction onclick depuis twig en js/php
    Par hannibal974 dans le forum Symfony
    Réponses: 2
    Dernier message: 19/06/2014, 17h10
  3. Bouton onclick : appel de 2 fonctions JS
    Par jicayom dans le forum ASP
    Réponses: 2
    Dernier message: 16/06/2013, 14h53
  4. Onclick : Appeler 2 fonctions / faire 2 appels
    Par Varkan dans le forum Général JavaScript
    Réponses: 12
    Dernier message: 17/05/2011, 20h25
  5. onclick appel deux fonction.
    Par Rifton007 dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 02/07/2009, 13h42

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo