Ohne Flash in die Zwischenablage kopieren

90

Ich habe viele Lösungen zum Kopieren in die Zwischenablage gefunden, aber alle entweder mit Flash oder für Websites. Ich suche nach einer Methode, die automatisch in die Zwischenablage kopiert wird, ohne Flash und für die Benutzerseite, für Benutzerskripte und natürlich für den Cross-Browser.

Schwarze Sonne
quelle
Ich habe keine gefunden und nach dem gleichen gesucht. Wollte Flash verwenden, entfernte diese Funktion daher vor der Erstellung.
EugenK
1
Ohne FLASH bezweifle ich, dass Sie dies in verschiedenen Browsern erledigen können. Aber es gibt konkrete Lösungen, die Ihnen helfen können, die Lösung Zeroclipboard zu bekommen
Rakesh Sankar
Rakesh - Ihre "konkrete Lösung" basiert auf Flash. Es funktioniert in keinem Browser, den ich benutze.
RobG
1
@wizztjh Methode in stackoverflow.com/questions/400212/… ist für die Site-Seite nicht für die Benutzerseite @Rakesh Zeroclipboard ist gut, aber ich möchte Methode vollständig ohne Flash finden
Black_Sun

Antworten:

31

Ohne Flash ist dies in den meisten Browsern einfach nicht möglich. Die Zwischenablage des Benutzers ist eine sicherheitsrelevante Ressource, da sie beispielsweise Passwörter oder Kreditkartennummern enthalten kann. Daher erlauben Browser zu Recht keinen Javascript-Zugriff darauf (einige erlauben dies mit einer Warnung, die vom Benutzer bestätigt wurde, oder mit signiertem Javascript-Code, aber nichts davon ist browserübergreifend).

Michael Borgwardt
quelle
21
Vielleicht sollten Seiten nicht in der Lage sein, aus der Zwischenablage zu lesen, aber warum nicht darauf schreiben? = /
Ajedi32
5
Aber warum sollte dies dann durch einen versteckten Blitz geschehen, der keine Benutzerbenachrichtigung und kein Feedback enthält?
Eric Grange
3
@EricGrange: Weil Mitte der neunziger Jahre jemand bei Netscape entschieden hat, dass Browser-Plugins aus Leistungsgründen native Binärdateien sind und somit so ziemlich alles können. Die Online-Welt war damals ein sehr einfacher Ort, und die Sicherheit war kein so großes Problem.
Michael Borgwardt
4
Während diese Antwort im Jahr 2011 zutraf, haben Browser im Kampf gegen Flash einen langen Weg zurückgelegt. Bitte sehen Sie meine Antwort unten.
Hovis Biddle
25

Ich hatte die Flash-Lösung ausprobiert und mochte sie auch nicht. Zu komplex und zu langsam. Ich habe einen Textbereich erstellt, die Daten in diesen eingefügt und das Verhalten des Browsers "STRG + C" verwendet.

Der jQuery-Javascript-Teil:

// catch the "ctrl" combination keydown
$.ctrl = function(key, callback, args) {
    $(document).keydown(function(e) {
        if(!args) args=[]; // IE barks when args is null
        if(e.keyCode == key && e.ctrlKey) {
            callback.apply(this, args);
            return false;
        }
    });
};

// put your data on the textarea and select all
var performCopy = function() {
    var textArea = $("#textArea1");
    textArea.text('PUT THE TEXT TO COPY HERE. CAN BE A FUNCTION.');
    textArea[0].focus();
    textArea[0].select();
};

// bind CTRL + C
$.ctrl('C'.charCodeAt(0), performCopy);

Der HTML-Teil:
<textarea id="textArea1"></textarea>

Fügen Sie nun in "PUT THE TEXT TO COPY HERE" ein, was Sie kopieren möchten. Kann eine Funktion sein. ' Bereich. Funktioniert gut für mich. Sie müssen nur eine STRG + C-Kombination erstellen. Der einzige Nachteil ist, dass auf Ihrer Website ein hässlicher Textbereich angezeigt wird. Wenn Sie style = "display: none" verwenden, funktioniert die Kopierlösung nicht.

Julio Saito
quelle
6
Dies scheint nur die Funktion von Strg + C an eine Javascript-Funktion zu binden und die Daten nicht in die Zwischenablage des Betriebssystems zu legen.
Ishmael
Klar, das ist die Idee. Erstellen Sie die Browser-Kopie für Sie. Hier gibt es eine ähnliche Lösung: knockoutjs.com/examples/clickCounter.html . Wenn Sie doppelklicken, erstellen sie einen Textbereich per Javascript mit dem Inhalt.
Julio Saito
hat bei mir auf osx nicht funktioniert, also habe ich e.metaKeyim Keydown-Vergleich hinzugefügt , aber aus irgendeinem Grund wird keine Kopieraktion ausgelöst. Siehe diese Geige: jsfiddle.net/gableroux/gta67/1
GabLeRoux
2
@GabLeRoux Die Kopierfunktion in Safari ist nur aktiviert, wenn Text ausgewählt ist. Dies hat früher funktioniert, aber ein Update für Safari hat es kürzlich gestoppt. Es scheint, dass die Auswahl des Textes nach dem Aufruf des Key-Down-Ereignisses ihn in diesem Browser nicht mehr schneidet. Funktioniert jedoch immer noch gut in Chrom. Na ja, könnte auf die Verwendung von Flash nur für diesen Browser zurückgreifen müssen ...
Aran Mulholland
So was. Wenn Sie ein Element, das Sie nicht sehen müssen, (aus irgendeinem Grund) nicht ausblenden können, können Sie es immer weit vom Start entfernt platzieren, z. B. padding-bottom: -1000.
m3nda
3

Während Sie ungeduldig auf die Xbrowser-Unterstützung der Zwischenablage-API warten ...


Dies funktioniert wunderbar in Chrome, Firefox, Edge, IE

Der IE fordert den Benutzer nur einmal auf, auf die Zwischenablage zuzugreifen.
Safari (5.1 zum Zeitpunkt des Schreibens) nicht unterstützt execCommandfürcopy/cut

/**
 * CLIPBOARD
 * https://stackoverflow.com/a/33337109/383904
 */
const clip = e => {
  e.preventDefault();
  
  const cont = e.target.innerHTML;
  const area = document.createElement("textarea");
  
  area.value = e.target.innerHTML; // or use .textContent
  document.body.appendChild(area);
  area.select();
 
  if(document.execCommand('copy')) console.log("Copied to clipboard");
  else prompt("Copy to clipboard:\nSelect, Cmd+C, Enter", cont); // Saf, Other
  
  area.remove();
};


[...document.querySelectorAll(".clip")].forEach(el => 
  el.addEventListener("click", clip)
);
<a class="clip" href="#!">Click an item to copy</a><br>
<a class="clip" href="#!"><i>Lorem</i></a><br>
<a class="clip" href="#!"><b>IPSUM</b></a><br>

<textarea placeholder="Paste here to test"></textarea>

Alle Browser (außer Firefox, das nur den MIME-Typ verarbeiten kann "plain/text", soweit ich ihn getestet habe) haben die Zwischenablage-API nicht implementiert . Dh versuchen, das Zwischenablage-Ereignis in Chrome mit zu lesen

var clipboardEvent = new ClipboardEvent("copy", {
        dataType: "plain/text",
        data: "Text to be sent to clipboard"
});

wirft: Nicht gefangen TypeError: Unzulässiger Konstruktor

Die beste Quelle für das unglaubliche Durcheinander zwischen Browsern und der Zwischenablage finden Sie hier (caniuse.com) (→ Folgen Sie den Kommentaren unter "Notizen" ).
MDN sagt, dass die grundlegende Unterstützung für alle Browser "(JA)" ist, was ungenau ist, da man erwarten würde, dass zumindest die API überhaupt funktioniert.

Roko C. Buljan
quelle
1

Sie können eine lokale Zwischenablage für die HTML-Seite verwenden. Auf diese Weise können Sie Inhalte INNERHALB der HTML-Seite kopieren / ausschneiden / einfügen, jedoch nicht von / zu Anwendungen von Drittanbietern oder zwischen zwei HTML-Seiten.

So können Sie eine benutzerdefinierte Funktion schreiben, um dies zu tun (getestet in Chrome und Firefox):

Hier ist der FIDDLE , die zeigt, wie Sie dies tun können.

Ich werde hier auch die Geige als Referenz einfügen.


HTML

<p id="textToCopy">This is the text to be copied</p>
<input id="inputNode" type="text" placeholder="Copied text will be pasted here" /> <br/>

<a href="#" onclick="cb.copy()">copy</a>
<a href="#" onclick="cb.cut()">cut</a>
<a href="#" onclick="cb.paste()">paste</a>

JS

function Clipboard() {
    /* Here we're hardcoding the range of the copy
    and paste. Change to achieve desire behavior. You can
    get the range for a user selection using
    window.getSelection or document.selection on Opera*/
    this.oRange = document.createRange();
    var textNode = document.getElementById("textToCopy");
    var inputNode = document.getElementById("inputNode");
    this.oRange.setStart(textNode,0);
    this.oRange.setEndAfter(textNode);
    /* --------------------------------- */
}

Clipboard.prototype.copy = function() {
    this.oFragment= this.oRange.cloneContents();
};

Clipboard.prototype.cut = function() {
    this.oFragment = this.oRange.extractContents();
};

Clipboard.prototype.paste = function() {
    var cloneFragment=this.oFragment.cloneNode(true)
    inputNode.value = cloneFragment.textContent;
};

window.cb = new Clipboard();
mrBorna
quelle
Hey mtBrona. Gibt es eine Möglichkeit, wie Sie eine jsfiddle für diese anhängen können? Kann es nicht aktivieren
neoswf
Können wir hier anstelle von elemnt
Uday A. Navapara
Dies funktioniert nur, wenn Sie sich im selben befinden window. Es ist keine tatsächliche Zwischenablage , die dem Betriebssystem und einer anderen Browser-Registerkarte zur Verfügung steht. Auch die Auswahl kann leicht mit select()und als einfach gemacht werdenwindow.getSelection()
Roko C. Buljan
0

document.execCommand('copy')wird tun was du willst. Aber es gab keine direkt verwendbaren Beispiele in diesem Thread ohne Cruft, also hier ist es:

var textNode = document.querySelector('p').firstChild
var range = document.createRange()
var sel = window.getSelection()

range.setStart(textNode, 0)
range.setEndAfter(textNode)
sel.removeAllRanges()
sel.addRange(range)
document.execCommand('copy')
Odinho - Velmont
quelle
-2

Es führt kein Weg daran vorbei, man muss Flash verwenden. Es gibt ein JQuery-Plugin namens jquery.copy , das das browserübergreifende Kopieren und Einfügen mithilfe einer Flash-Datei (SWF) ermöglicht. Dies ähnelt der Funktionsweise des Syntax-Textmarkers in meinem Blog.

Sobald Sie auf die Datei jquery.copy.js verweisen, müssen Sie nur noch Folgendes ausführen, um Daten in die Zwischenablage zu verschieben:

$.copy("some text to copy");

Schön und einfach ;)

Talha Ahmed Khan
quelle
Link defekt (die Dateien stehen nicht mehr zum Download
bereit