execCommand('copy') 在 OS 上的 Chrome 上失败 X

Question

考虑以下 jsfiddle，用户可以单击包含粗体文本的 div，然后进行复制 (ctrl+c win cmd+c mac) 以复制html 作为 HTML 到剪贴板。如果您随后粘贴到例如 gmail 中，您将获得 html 格式。

基本上 'copyHtmlToClipboard' 函数创建一个隐藏的 div，将 html 复制到它，用 document.createRange 选择它，然后调用 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();
}

在 windows Chrome/Firefox 这工作正常。

然而 Mac Chrome execCommand returns false.

如何使此代码在 Mac 上运行？

谢谢！

Answer 1

Safari 不支持 copy 和 cut 命令。

Source

Answer 2

发生这种情况是因为只有在用户操作引起的某些事件之后才允许调用 copy 命令。

这些事件被命名为 "Semi-trusted events"，您可以找到列表 in spec。 copy 事件不在列表中，因此无法在您的事件处理程序中复制文本。您可以改为收听 keyup 事件，然后在检查 ctrl+c 被按下后触发您的操作

Answer 3

据我所知，这是一个 chrome 错误，请参阅：

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

execCommand('copy') 在 OS 上的 Chrome 上失败 X

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

html

javascript

macos

execcommand

ecmascript-6