wake-up-neo.com

Kopieren Sie mit jQuery/js in Chrome in die Zwischenablage

Ich weiß, dass diese Art von Frage hier oft gestellt wurde, einschließlich: Wie kopiere ich in JavaScript in die Zwischenablage? oder Wie kopiere ich mit jQuery Text in die Zwischenablage des Clients? , ich schränke den Geltungsbereich ein:

Bedingung:

  1. funktioniert gut in Google Chrome (wäre schön, wenn Browserübergreifend ist, aber nicht notwendig)
  2. ohne blitz

Gibt es eine solche Lösung oder Abhilfe?

javascriptjquerygoogle-chromeclipboardcopy-paste
31
Sam Su

Ich finde nur ein weiteres fantastisches Repo bei Github.

Moderne Kopie in die Zwischenablage. Kein Blitz. Nur 3kb gezippt

https://github.com/zenorocha/clipboard.js

Browser-Unterstützung:

12
Sam Su

Sie können entweder document.execCommand('copy') oder addEventListener('copy') oder eine Kombination aus beiden verwenden. 

1. Auswahl auf benutzerdefinierten Termin kopieren

Wenn Sie eine copy für ein anderes Ereignis als ctrl-c oder eine Rechtsklick-Kopie auslösen möchten, verwenden Sie document.execCommand('copy'). Das, was momentan ausgewählt ist, wird kopiert. So zum Beispiel beim Mouseup:

elem.onmouseup = function(){
    document.execCommand('copy');
}

BEARBEITEN:

document.execCommand('copy') wird nur von Chrome 42, IE9 und Opera 29 unterstützt, wird jedoch von Firefox 41 (voraussichtlich September 2015) unterstützt. Beachten Sie, dass IE normalerweise um Erlaubnis zum Zugriff auf die Zwischenablage fragt.

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

2. Benutzerdefinierter Inhalt auf Kopie kopieren, ausgelöst durch Benutzer

Oder Sie können addEventListener('copy') verwenden. Dies wird das Kopierereignis beeinträchtigen und Sie können den gewünschten Inhalt dort ablegen. Dies setzt voraus, dass der Benutzer eine Kopie auslöst.

BEARBEITEN:

In Chrome, Firefox und Safari hat das Ereignis das Objekt clipboardData mit der Methode setData. Bei IE ist das clipboardData-Objekt eine Fenstereigenschaft. Dies kann also auf allen gängigen Browsern funktionieren, vorausgesetzt, Sie überprüfen, wo clipboardData ist.

 elem2.addEventListener('copy', function (e) {
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content');
    }

});

https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardDatahttps://msdn.Microsoft.com/en-us/library/ms535220 ( v = vs.85) .aspx

3. ein bisschen von beiden

Mit einer Kombination können Sie benutzerdefinierte Inhalte für gewünschte Ereignisse kopieren. Das erste Ereignis löst also execCommand aus, dann greift die listener ein. Setzen Sie beispielsweise benutzerdefinierten Inhalt auf einen Div.

  elem3.onclick = function () {
        document.execCommand('copy');
    }

   elem3.addEventListener('copy', function (e) {

    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content from click');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content from click');
    }

});

Bei Verwendung des letzten Ansatzes wird davon ausgegangen, dass beide Ansätze unterstützt werden. Ab Juli 2015 funktioniert er nur auf Chrome 43 (vielleicht 42 konnte ich nicht testen) und IE mindestens 9 und 10. Mit Firefox 41, der execcommand('copy') unterstützt, sollte dies ebenfalls funktionieren.

Beachten Sie, dass diese Methoden und Eigenschaften für die meisten dieser Methoden als experimentell deklariert (oder sogar für IE veraltet) sind. Sie sollten daher vorsichtig verwendet werden. Es scheint jedoch, dass sie mehr und mehr unterstützt werden.

Gehe mit allen Beispielen: https://jsfiddle.net/jsLfnnvy/12/

27
Julien Grégoire

Variable Zeichenfolge kann mit folgendem js-Code in die Zwischenablage kopiert werden.

var text = 'text to copy';
var copyFrom = $('<textarea/>');
copyFrom.css({
 position: "absolute",
 left: "-1000px",
 top: "-1000px",
});
 copyFrom.text(text);
 $('body').append(copyFrom);
 copyFrom.select();
 document.execCommand('copy');
7
Suneth Senanayake

Für diejenigen, die das herausfinden, habe ich es tatsächlich in Chrome auf der Basis von @JulianGregoires Antwort gefunden.

Ich habe den Code neu geschrieben, um ihn meiner Meinung nach ein bisschen besser zu machen:

el.onclick = function () {
    var copy = function (e) {
        e.preventDefault();
        console.log('copy');
        var text = "blabla"
        if (e.clipboardData) {
            e.clipboardData.setData('text/plain', text);
        } else if (window.clipboardData) {
            window.clipboardData.setData('Text', text);
        }
    }
    window.addEventListener('copy', copy);
    document.execCommand('copy');
    window.removeEventListener('copy', copy);
}
2
Joel Harkes

Achtung: Ich habe genau das gleiche Skript von Julien Grégoire ausprobiert, es löste jedoch nicht den Oncopy-Ereignis-Listener aus. Der Grund dafür war, dass ich für den Body-Tag vom Benutzer CSS auswählen konnte.

Stellen Sie daher sicher, dass Sie es entfernen oder auf dem Element, an das der Ereignis-Listener angehängt ist, initial festlegen.

Beispiel: https://jsfiddle.net/faimmedia/jsLfnnvy/80/

0
Tim

Wenn Sie verwenden Knockout wie ich (aus irgendeinem Grund bin ich immer noch), sollten Sie sich diese Frage/Antwort ansehen:

Wie können KnokoutJS und ClipboardJS zusammenarbeiten?

0
João Antunes