execCommand('copy') fails on Chrome on OS X

Question

Consider the following jsfiddle where the user can click on a div containing bold text and then do a copy (ctrl+c win cmd+c mac) to copy the html to the clipboard as HTML. If you then paste into for example a gmail you get the html formatting.

Basically the 'copyHtmlToClipboard' function creates a hidden div, copy the html to it, selects it with document.createRange and then calls document.execCommand('copy')

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 windows Chrome/Firefox this works fine.

However on Mac Chrome execCommand returns false.

How can I make this code work on Mac ?

Thx!

https://clipboardjs.com/ - http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript — mplungjan, Mar 24 '16 at 08:58

score 1 · Answer 1 · answered Mar 24 '16 at 08:56

1

Safari doesn't have support for copy and cut commands.

Source

answered Mar 24 '16 at 08:56

Dimitris Karagiannis

8,942
8
38
63

ok I see that. But what about Chrome on Mac ? why doesn't it work there and can it be made to work ? – kofifus Mar 24 '16 at 09:03
I run [this](http://codepen.io/netsi1964/full/QbLLGW/) on both Mac and Windows and `copy` works on both Chromes Are you sure your version of Chrome is above version 42 on Mac? – Dimitris Karagiannis Mar 24 '16 at 09:08
but in the codepen it works ! what am I doing different ? can you try my fiddle pls ? – kofifus Mar 24 '16 at 09:36
I will take a look once I have some time – Dimitris Karagiannis Mar 24 '16 at 11:04

score 1 · Answer 2 · answered Mar 24 '16 at 11:24

1

It happens because you are allowed to call copy command only after some events that caused by user actions.

These events are named "Semi-trusted events" and you can find the list in spec. copy event is not in the list, so can't copy text in your event handler. You can listen to keyup event instead and then trigger your actions after check that ctrl+c was pressed

answered Mar 24 '16 at 11:24

just-boris

9,468
5
48
84

thx but this does not explain why it works on chrome windows but not on chrome mac – kofifus Mar 24 '16 at 12:12
1

Maybe it is related with implementation of firing and hadnling `copy` event in these systems – just-boris Mar 24 '16 at 14:26
reading the section you referenced, I don't think it is relevant. It is about dispatching copy event where as I am calling execCommand(copy) inside a copy event already dispatched by the browser – kofifus Mar 24 '16 at 23:43
As far as I can tell the event _is trusted_ on chrome OSX. if I consolelog the isTrusted flag I get true. still execCommand('copy' returns false – kofifus Mar 27 '16 at 04:42
I think the related bug is https://bugs.chromium.org/p/chromium/issues/detail?id=552975 – kofifus Mar 27 '16 at 04:49

score 0 · Accepted Answer · answered Mar 27 '16 at 04:50

0

As far as I can tell this is a chrome bug see:

https://bugs.chromium.org/p/chromium/issues/detail?id=552975

answered Mar 27 '16 at 04:50

kofifus

17,260
17
99
173

execCommand('copy') fails on Chrome on OS X

3 Answers3