2016-03-24 8 views
0

Betrachten Sie die folgenden jsfiddle, wo der Benutzer auf ein div mit fettem Text klicken und dann eine Kopie (Strg + c Win cmd + c mac) zum Kopieren der HTML zu tun die Zwischenablage als HTML. Wenn Sie dann zum Beispiel in eine Google Mail einfügen, erhalten Sie die HTML-Formatierung.execCommand ('copy') schlägt auf Chrome unter OS X

Grundsätzlich ist die 'copyHtmlToClipboard' Funktion erstellt eine versteckte div, kopieren Sie die HTML es, wählt er mit document.createRange und ruft dann document.execCommand ('Kopie')

function copyHtmlToClipboard(html) { 
    var div = document.createElement("div"); 
    div.style.opacity = 0; 
    div.style.position = "absolute"; 
    div.style.pointerEvents = "none"; 
    div.style.zIndex = -1; 
    div.setAttribute('tabindex', '-1'); // so it can be focused 
    div.innerHTML = html; 
    document.body.appendChild(div); 

    var focused=document.activeElement; 
    div.focus(); 

    window.getSelection().removeAllRanges(); 
    var range = document.createRange(); 
    // not using range.selectNode(div) as that makes chrome add an extra <br> 
    range.setStartBefore(div.firstChild); 
    range.setEndAfter(div.lastChild); 
    //range.selectNode(div); 
    window.getSelection().addRange(range); 

    var ok=false; 
    try { 
    ok = document.execCommand('copy'); 
    } catch (err) { 
    console.log(err); 
    } 
    if (!ok) console.log('execCommand failed!'); 

    window.getSelection().removeAllRanges(); 
    document.body.removeChild(div); 

    focused.focus(); 
} 

On Fenster Chrome/Firefox das funktioniert gut.

Jedoch auf Mac Chrome execCommand gibt false zurück.

Wie kann ich diesen Code auf dem Mac arbeiten lassen?

Thx!

+0

https://clipboardjs.com/- http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript – mplungjan

Antwort

1

Safari unterstützt die Befehle copy und nicht.

Source

+0

ok Ich sehe das. Aber was ist mit Chrome auf dem Mac? Warum funktioniert es nicht dort und kann es zur Arbeit gemacht werden? – kofifus

+0

Ich führe [this] (http://codepen.io/netsi1964/full/QbLLGW/) sowohl auf Mac als auch auf Windows aus und 'copy' funktioniert auf beiden Chromes. Sind Sie sicher, dass Ihre Version von Chrome über Version 42 auf dem Mac läuft? –

+0

ja Chrome 49.0 auf OS X 10.10 – kofifus

1

Es geschieht, weil Sie dürfen erst nach einigen Ereignissen copy Befehl aufrufen, die durch Benutzeraktionen verursacht.

Diese Ereignisse heißen "Semi-trusted events" und Sie finden die Liste in spec. copy Ereignis ist nicht in der Liste, daher kann Text in Ihrem Ereignishandler nicht kopiert werden. Sie können stattdessen auf keyup Ereignis hören und dann Aktionen nach dem Check auslösen, dass ctrl+c

+0

thx, aber das erklärt nicht, warum es auf Chrome Windows funktioniert, aber nicht auf Chrome Mac – kofifus

+1

Vielleicht ist es mit der Implementierung von feuern und hadnling 'copy' Ereignis in diesen Systemen –

+0

lesen Abschnitt, auf den Sie verwiesen haben, halte ich nicht für relevant. Es geht darum, Copy-Ereignisse zu versenden, wo ich execCommand (copy) in einem Copy-Event anrufe, das bereits vom Browser – kofifus