Bouton copie dans une boucle while

Résolu

trigo-no Messages postés 5 Date d'inscription Statut Membre Dernière intervention -
trigo-no Messages postés 5 Date d'inscription Statut Membre Dernière intervention - 24 mai 2026 à 08:14

Bonjour,

Je voudrai mettre un bouton COPIE pour permettre a l'utilisateur de copier/coller les info.

J'ai recuperer ce petit script qui fonctionne trés bien quand j'ai un seul bouton sur ma page.

<p>
    <span id="tocopy">COPIE CE TEXTE</span>
   <input type="button" value="Copier" class="js-copy" data-target="#tocopy">
</p>



<script type="text/javascript">
var btncopy = document.querySelector('.js-copy_<?= substr($sous_Entry,0,-4)?>');
if(btncopy) {
    btncopy.addEventListener('click', docopy);
}

function docopy() {

    // Cible de l'élément qui doit être copié
    var target = this.dataset.target;
    var fromElement = document.querySelector(target);
    if(!fromElement) return;

    // Sélection des caractères concernés
    var range = document.createRange();
    var selection = window.getSelection();
    range.selectNode(fromElement);
    selection.removeAllRanges();
    selection.addRange(range);

    try {
        // Exécution de la commande de copie
        var result = document.execCommand('copy');
        if (result) {
            // La copie a réussi
            alert('Le texte est bien copié !');
        }
    }
    catch(err) {
        // Une erreur est surevnue lors de la tentative de copie
        alert(err);
    }

    // Fin de l'opération
    selection = window.getSelection();
    if (typeof selection.removeRange === 'function') {
        selection.removeRange(range);
    } else if (typeof selection.removeAllRanges === 'function') {
        selection.removeAllRanges();
    }
}
</script>

Ensuite, je veux l'integrer dans une boucle while php avec une varaible php

while($sous_Entry = @readdir($MyDirectory_2)) 
	{
	echo '	<span id="tocopy_'.substr($sous_Entry,0,-4).'">lev/photo/'.$Entry.'/'.$sous_Entry.'</span>
			<input type="button" value="Copier" class="js-copy_'.substr($sous_Entry,0,-4).'" data-target="#tocopy_'.substr($sous_Entry,0,-4).'">';
}

Mais cela ne fonctionne pas.

Pourriez-vous me dire ou est le problème et m'aider à le resoudre. Merci par avance
Windows / Chrome 148.0.0.0

Afficher la suite

1 réponse

Bruno83200_6929 Messages postés 725 Date d'inscription Statut Membre Dernière intervention 170

Bonjour,

Tu es très proche ton problème vient surtout de la façon dont tu attaches l’événement.

Utiliser une classe commune pour tous les boutons et boucler en JavaScript

???? Ton HTML/PHP (corrigé)

<?php
while($sous_Entry = @readdir($MyDirectory_2)) {
    $id = substr($sous_Entry,0,-4);

    echo '
    <p>
        <span id="tocopy_'.$id.'">lev/photo/'.$Entry.'/'.$sous_Entry.'</span>
        <input type="button" value="Copier" class="js-copy" data-target="#tocopy_'.$id.'">
    </p>';
}
?>

Important :

Même classe pour tous : js-copy
Chaque bouton garde une cible unique avec data-target.

Ton JavaScript (corrigé)

<script>
var buttons = document.querySelectorAll('.js-copy');

buttons.forEach(function(btn) {
    btn.addEventListener('click', function(){

        var target = this.dataset.target;
        var fromElement = document.querySelector(target);
        if (!fromElement) return;

        var range = document.createRange();
        var selection = window.getSelection();

        range.selectNode(fromElement);
        selection.removeAllRanges();
        selection.addRange(range);

        try {
            var result = document.execCommand('copy');
            if (result) {
                alert('Le texte est bien copié !');
            }
        } catch(err) {
            alert(err);
        }

        selection.removeAllRanges();
    });
});
</script>

Bonus (version moderne encore mieux)

document.execCommand('copy') est déprécié. Tu peux utiliser :

navigator.clipboard.writeText(fromElement.textContent)
    .then(() => alert('Copié !'))
    .catch(err => alert(err));

Remplace toute la partie range/select par ça → plus simple et plus fiable.

Ce qui bloquait :

Une classe différente par bouton
querySelector au lieu de querySelectorAll
JS lié à une variable PHP hors contexte

Ce qu’il faut faire :

Une classe unique
Une boucle JS
Utiliser data-target

trigo-no Messages postés 5 Date d'inscription Statut Membre Dernière intervention

Bonjour Bruno

Comme tu dis, j'étais proche... mais pas suffisant pour la réussite.

Merci pour ton aide. C est parfait. Belle journée
0

Bouton copie dans une boucle while

1 réponse

Discussions similaires

Newsletters