Text kopieren aus Zur Zwischenablage

Ich habe versucht, die zu kopieren innerContent von a <span> ohne Erfolg in meine Zwischenablage:

HTML

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

JavaScript

Funktionsaufruf

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

Funktion

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

Ich habe auch versucht:

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

Wie es scheint .select() funktioniert nicht bei a <span> Element, da ich auf beiden den folgenden Fehler bekomme:

Sie könnten Folgendes tun: Erstellen Sie einen temporären Textbereich und fügen Sie ihn an die Seite an, und fügen Sie dann den Inhalt der hinzu span Element in den Textbereich, kopieren Sie den Wert aus dem Textbereich und entfernen Sie den Textbereich.

Aufgrund einiger Sicherheitseinschränkungen können Sie nur die ausführen Copy Befehl, wenn der Benutzer mit der Seite interagiert hat, also müssen Sie eine Schaltfläche hinzufügen und den Text kopieren, nachdem der Benutzer auf die Schaltfläche geklickt hat.

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>

Siehe https://stackoverflow.com/a/48020189/2240670, es gibt ein Code-Snippet, das Ihnen ein Beispiel für ein div gibt, das auch für eine Spanne gilt, ich habe es hier nicht kopiert, um Duplikate zu vermeiden.

Grundsätzlich müssen Sie beim Kopieren in die Zwischenablage eine Textauswahl erstellen, <textarea> und <input> Elemente machen dies einfach, weil sie eine haben select() Methode, aber wenn Sie versuchen, Inhalte von einem anderen Elementtyp wie a zu kopieren <div> oder <span>müssen Sie:

1. Erstelle/erhalte ein Range Objekt (einige Browser bieten keinen Konstruktor oder eine anständige Möglichkeit, dies zu tun). Berufung document.getSelection().getRangeAt(0)ich fand funktioniert auf den meisten Browsern außer Edge (dh 11 funktioniert aber).
2. Fügen Sie das Element, aus dem Sie kopieren möchten, zur Auswahl dieses Bereichs hinzu.
3. Fügen Sie diesen Bereich dem Fenster oder Dokument hinzu Selection.
4. Anruf document.execCommand("copy") um den ausgewählten Text zu kopieren.

Ich empfehle auch, die API von zu überprüfen Selection und Rangedas wird Ihnen ein besseres Verständnis dafür geben.

einfache Methode

1) Erstellen Sie eine Eingabe
2) Stil verleihen Z-Index -1 und es wird sich verstecken

    var code = $("#copy-to-clipboard-input");
    var btnCopy = $("#btn-copy");

    btnCopy.on("click", function () {
        code.select();
        document.execCommand("copy");
    });

                                                                                             
<input type="input" style="width:10px; position:absolute; z-index: -100 !important;" value="hello" id="copy-to-clipboard-input">
<button class="btn btn-success" id="btn-copy">Copy</button>