web-dev-qa-db-fra.com

Copiez le texte de <span> dans le presse-papiers

J'ai essayé de copier le innerContent d'un <span> Dans mon presse-papiers sans succès:

HTML

<span id="pwd_spn" class="password-span"></span>

Javascript

Appel de fonction 

    document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('copy').addEventListener('click', copy_password);
});

Fonction 

function copy_password() {
    var copyText = document.getElementById("pwd_spn").select();
    document.execCommand("Copy");
}

J'ai aussi essayé:

function copy_password() {
    var copyText = document.getElementById("pwd_spn").textContent;
    copyText.select();
    document.execCommand("Copy");
}

Il semble que .select() ne fonctionne pas sur un élément <span> Car j'obtiens l'erreur suivante sur les deux:

enter image description here

javascripthtmlcopyclipboardcopy-paste
7
Gucci

Vous pouvez faire ceci: créer une zone de texte temporaire et l'ajouter à la page, puis ajouter le contenu de l'élément span à la zone de texte, copier la valeur de la zone de texte et supprimer la zone de texte.

En raison de certaines restrictions de sécurité, vous ne pouvez exécuter la commande Copy que si l'utilisateur a interagi avec la page, vous devez donc ajouter un bouton et copier le texte après que l'utilisateur a cliqué sur le bouton.

document.getElementById("cp_btn").addEventListener("click", copy_password);

function copy_password() {
    var copyText = document.getElementById("pwd_spn");
    var textArea = document.createElement("textarea");
    textArea.value = copyText.textContent;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("Copy");
    textArea.remove();
}
<span id="pwd_spn" class="password-span">Test</span>
<button id="cp_btn">Copy</button>
27
rafaelgssa

Voir https://stackoverflow.com/a/48020189/224067 il y a un extrait de code pour qui vous donne un exemple de div, qui s'applique également à un span, je ne l'ai pas copié ici pour éviter les doublons.

Fondamentalement, lorsque vous copiez dans le presse-papiers, vous devez créer une sélection de texte, les éléments <textarea> Et <input> Facilitent cela car ils ont une méthode select(), mais si vous essayez de copier le contenu de tout autre type d'élément comme un <div> ou <span>, vous devrez:

  1. Créez/obtenez un objet Range (certains navigateurs ne fournissent pas de constructeur, ou une manière décente de le faire). En appelant document.getSelection().getRangeAt(0), j'ai trouvé des travaux sur la plupart des navigateurs sauf Edge (ie11 fonctionne cependant).
  2. Ajoutez l'élément à partir duquel vous souhaitez copier la sélection de cette plage.
  3. Ajoutez cette plage à la fenêtre ou au document Selection.
  4. Appelez document.execCommand("copy") pour copier le texte sélectionné.

Je recommande également de vérifier l'API de Selection et Range, qui vous donnera une meilleure compréhension de cela.

2
J. García