使用 document.execCommand('copy') 复制到剪贴板失败并显示大文本

Question

我正在使用隐藏文本区域放置一些文本，select 然后使用 document.execCommand 将其复制到剪贴板。这通常有效，但当文本很大时会失败 (returns false)。在 Chrome v55 中，它似乎在 180K 个字符左右失败。

这种方式复制的数据量有限制吗？普通的 Ctrl+C 似乎不受同样的限制。

注意：有人将其标记为可能与 Does document.execCommand('copy') have a size limitation? 重复。这可能是类似的问题，但那个问题被标记为我不使用的特定框架，而且也没有得到回答。我相信我的问题更笼统并且仍然相关。

附上代码供参考。

      function copyTextToClipboard(text) {
        var textArea = document.createElement('textarea');
        textArea.style.position = 'fixed';
        textArea.style.top = 0;
        textArea.style.left = 0;
        textArea.style.width = '2em';
        textArea.style.height = '2em';
        textArea.style.padding = 0;
        textArea.style.border = 'none';
        textArea.style.outline = 'none';
        textArea.style.boxShadow = 'none';
        textArea.style.background = 'transparent';
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.select();
        try {
          var successful = document.execCommand('copy');
          var msg = successful ? 'successful' : 'unsuccessful';
          console.log('Copying text command was ' + msg);
        } catch (err) {
          console.log('Oops, unable to copy');
        }
        document.body.removeChild(textArea);
      }

Answer 1

与 execCommand('copy') 调用本身相比，此问题更多地与呈现此长文本所花费的时间有关。

Firefox 引发了一条解释性很强的错误消息：

document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.

您的代码生成文本的时间太长，因此浏览器无法将其识别为半可信事件...

解决方案是首先生成此文本，只有在听到用户手势后才能调用 execCommand。因此，为了使其成为可能，您可以例如监听一个mousedown事件生成文本，只有在mouseup事件中才会真正执行复制命令。

const text = ('some text a bit repetitive ' + Date.now()).repeat(50000);

function copyTextToClipboard(text) {
  // first we create the textArea
  var textArea = document.createElement('textarea');
  textArea.style.position = 'absolute';
  textArea.style.opacity = '0';
  textArea.value = text;
  document.body.appendChild(textArea);

  var execCopy = e => {   // triggered on mouseup
    textArea.select();
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
    document.body.removeChild(textArea);
  };
  // here the magic
  btn.addEventListener('mouseup', execCopy, {
    once: true 
  });
}
// triggered on mousedown
btn.onmousedown = e => copyTextToClipboard(text);

<button id="btn">copy some text in your clipboard</button>
<p>May struggle your browser a little bit, it's quite a long text... Please be patient</p>

使用 document.execCommand('copy') 复制到剪贴板失败并显示大文本

Copying to clipboard with document.execCommand('copy') fails with big texts

javascript

clipboard

dom