Wie kopiere ich in JavaScript in die Zwischenablage?

Question 1

Was ist der beste Weg, um Text in die Zwischenablage zu kopieren (Multi-Browser)?

Ich habe versucht:

function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
        clipboardHelper.copyString(text);
    }
}

Aber im Internet Explorer gibt es einen Syntaxfehler. Bei Firefox heißt es unsafeWindow ist nicht definiert.

Ein netter Trick ohne Verwendung Blinken: Wie greift Trello auf die Zwischenablage des Benutzers zu?

Question 2

Das automatische Kopieren in die Zwischenablage kann gefährlich sein und wird daher von den meisten Browsern (außer Internet Explorer) sehr erschwert. Ich persönlich verwende den folgenden einfachen Trick:

function copyToClipboard(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

Dem Benutzer wird die Eingabeaufforderungsbox präsentiert, in der der zu kopierende Text bereits ausgewählt ist. Jetzt reicht es zu drücken Strg + C und Eingeben (um die Kiste zu schließen) – und voila!

Jetzt ist der Kopiervorgang aus der Zwischenablage sicher, weil der Benutzer es manuell macht (aber auf ziemlich einfache Weise). Natürlich funktioniert es in allen Browsern.

<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>

<script>
  function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
</script>

Question 3

Hier ist meine Meinung dazu…

function copy(text) {
    var input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
 }

@korayem: Beachten Sie, dass HTML verwendet wird input Feld respektiert keine Zeilenumbrüche \n und wird jeden Text in eine einzelne Zeile glätten.

Wie von @nikksan in den Kommentaren erwähnt, using textarea wird das Problem wie folgt beheben:

function copy(text) {
    var input = document.createElement('textarea');
    input.innerHTML = text;
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
}

Question 4

Das Lesen und Ändern der Zwischenablage von einer Webseite wirft Sicherheits- und Datenschutzbedenken auf. Im Internet Explorer ist dies jedoch möglich. ich habe das gefunden Beispielschnipsel:

    <script type="text/javascript">
        function select_all(obj) {
            var text_val=eval(obj);
            text_val.focus();
            text_val.select();
            r = text_val.createTextRange();
            if (!r.execCommand) return; // feature detection
            r.execCommand('copy');
        }
    </script>
    <input value="http://www.sajithmr.com"
     onclick="select_all(this)" name="url" type="text" />

Question 5

Wenn Sie eine wirklich einfache Lösung wollen (die Integration dauert weniger als 5 Minuten) und von Anfang an gut aussieht, dann Clippy ist eine schöne Alternative zu einigen der komplexeren Lösungen.

Es wurde von einem Mitbegründer von GitHub geschrieben. Beispiel-Flash-Einbettungscode unten:

<object
    classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    width="110"
    height="14"
    id="clippy">

    <param name="movie" value="/flash/clippy.swf"/>
    <param name="allowScriptAccess" value="always"/>
    <param name="quality" value="high"/>
    <param name="scale" value="noscale"/>
    <param NAME="FlashVars" value="text=#{text}"/>
    <param name="bgcolor" value="#{bgcolor}"/>
    <embed
        src="/flash/clippy.swf"
        width="110"
        height="14"
        name="clippy"
        quality="high"
        allowScriptAccess="always"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
        FlashVars="text=#{text}"
        bgcolor="#{bgcolor}"/>
</object>

Denken Sie daran, zu ersetzen #{text} mit dem Text, den Sie kopieren müssen, und #{bgcolor} mit einer Farbe.