Wie kann ich in JavaScript in die Zwischenablage kopieren?

Question

Wie kopiere ich am besten Text in die Zwischenablage (Multibrowser)?

Ich habe es 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);
    }
}

Im Internet Explorer kommt es jedoch zu einem Syntaxfehler. In Firefox heißt es unsafeWindow ist nicht definiert .

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

Answer 1

Wenn Sie eine wirklich einfache Lösung wünschen (die Integration dauert weniger als 5 Minuten), die sofort nach dem Auspacken gut aussieht, dann Clippy ist eine gute Alternative zu einigen der komplexeren Lösungen.

Er 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, die #{text} mit dem zu kopierenden Text, und #{bgcolor} mit einer Farbe.

Answer 2

Ich habe kürzlich einen technischer Blogbeitrag zu genau diesem Problem (ich arbeite bei Lucidchart und wir haben vor kurzem unsere Zwischenablage überarbeitet).

Das Kopieren von einfachem Text in die Zwischenablage ist relativ einfach, vorausgesetzt, Sie versuchen, dies während eines Systemkopiervorgangs zu tun (Benutzer drückt Ctrl + C oder über das Menü des Browsers).

var isIe = (navigator.userAgent.toLowerCase().indexOf("msie")    != -1 ||
            navigator.userAgent.toLowerCase().indexOf("trident") != -1);

document.addEventListener('copy', function(e) {
    var textToPutOnClipboard = "This is some text";
    if (isIe) {
        window.clipboardData.setData('Text', textToPutOnClipboard);
    } else {
        e.clipboardData.setData('text/plain', textToPutOnClipboard);
    }
    e.preventDefault();
});

Es ist viel schwieriger, Text in die Zwischenablage zu kopieren, wenn dies nicht während eines Systemkopiervorgangs geschieht. Es sieht so aus, als ob einige dieser anderen Antworten auf Möglichkeiten verweisen, dies über Flash zu tun, was die einzige browserübergreifende Möglichkeit ist, dies zu tun (soweit ich weiß).

Abgesehen davon gibt es einige Optionen auf Browser-Basis.

Am einfachsten ist dies im Internet Explorer, wo Sie über JavaScript jederzeit auf das clipboardData-Objekt zugreifen können:

window.clipboardData

(Wenn Sie versuchen, dies außerhalb eines Ausschneide-, Kopier- oder Einfügevorgangs des Systems zu tun, wird Internet Explorer den Benutzer jedoch auffordern, der Webanwendung die Berechtigung für die Zwischenablage zu erteilen).

In Chrome können Sie eine Chrome-Erweiterung erstellen, mit der Sie Berechtigungen für die Zwischenablage (dies tun wir für Lucidchart). Für Benutzer, die Ihre Erweiterung installiert haben, müssen Sie dann nur noch das Systemereignis selbst auslösen:

document.execCommand('copy');

Es sieht so aus, als hätte Firefox einige Optionen die es den Benutzern ermöglichen, bestimmten Seiten Zugriff auf die Zwischenablage zu gewähren, aber ich habe keine davon persönlich ausprobiert.

Answer 3

Ich mag das hier:

<input onclick="this.select();" type='text' value='copy me' />

Wenn ein Benutzer nicht weiß, wie man Text in seinem Betriebssystem kopiert, dann weiß er wahrscheinlich auch nicht, wie man ihn einfügt. Lassen Sie ihn also einfach automatisch auswählen und überlassen Sie den Rest dem Benutzer.

Answer 4

Zwischenablage.js ist ein kleines, nicht Flash-basiertes Dienstprogramm, das das Kopieren von Text oder HTML-Daten in die Zwischenablage ermöglicht. Es ist sehr einfach zu verwenden, schließen Sie einfach die .js ein und verwenden Sie etwas wie dieses:

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

clipboard.js ist auch auf GitHub .

Anmerkung: Dies ist jetzt veraltet. Migrieren Sie zu aquí .

Answer 5

Ich verwende dies sehr erfolgreich ( ohne jQuery oder einem anderen Framework).

function copyToClp(txt){
    var m = document;
    txt = m.createTextNode(txt);
    var w = window;
    var b = m.body;
    b.appendChild(txt);
    if (b.createTextRange) {
        var d = b.createTextRange();
        d.moveToElementText(txt);
        d.select();
        m.execCommand('copy');
    } 
    else {
        var d = m.createRange();
        var g = w.getSelection;
        d.selectNodeContents(txt);
        g().removeAllRanges();
        g().addRange(d);
        m.execCommand('copy');
        g().removeAllRanges();
    }
    txt.remove();
}

Warnung

Tabulatoren werden in Leerzeichen umgewandelt (zumindest in Chrome).