Ohne Flash in die Zwischenablage kopieren

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.

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).

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.

clipboard.js wurde gerade veröffentlicht, um ohne Flash in die Zwischenablage kopiert zu werden

Sehen Sie es hier in Aktion> http://zenorocha.github.io/clipboard.js/#example-action

Es ist endlich da! (Solange Sie Safari oder IE8 nicht unterstützen ... -_-)

Sie können jetzt Zwischenablageaktionen ohne Flash ausführen. Hier ist die relevante Dokumentation:

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

https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=de

https://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx#copy

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

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.

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();

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')

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 ;)