Bouton copie dans une boucle while
Bruno83200_6929 Messages postés 707 Date d'inscription Statut Membre Dernière intervention -
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
- Bouton copie dans une boucle while
- Copie ecran ipad - Guide
- Copie disque dur - Guide
- On off bouton ✓ - Forum Matériel & Système
- Copie caché - Guide
- Mon pc s'allume et s'éteint en boucle - Forum Matériel & Système
1 réponse
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
