使用document.execCommand（'copy'）复制到剪贴板失败并显示大文本 [英] Copying to clipboard with document.execCommand('copy') fails with big texts

问题描述

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

I'm using a hidden text area to put some text, select it and then using document.execCommand to copy it to the clipboard. This usually works but fails (returns false) when the text is large. In Chrome v55, it seems to fail around 180K characters.

这种方式可以复制的数据量是否有限制？正常Ctrl + C似乎不受相同的限制。

Is there a limit to the amount of data that can be copied this way? Normal Ctrl+C doesn't seem subject to the same limitations.

注意：有人将此标记为 document.execCommand（'copy'）是否有大小限制？。这可能是类似的问题，但是那个被标记为我不使用的特定框架，而且没有得到回答。我相信我的问题更为笼统，仍然具有相关性。

note: someone marked this as a possible duplicate of Does document.execCommand('copy') have a size limitation?. It might be similar question, but that one was tagged as a specific framework that I don't use and also, it wasn't answered. I believe my question is more general and still relevant.

我附上代码供参考。

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

推荐答案

问题还有更多工作要做渲染这个长文本所需的时间比 execCommand（'copy'）调用本身。

The problem has more to do with the time it takes to render this long text than the execCommand('copy') call itself.

Firefox提出一个非常明确的错误信息：

Firefox raises an quite explanatory error message :

document.execCommand（'cut'/'copy'）被拒绝，因为它没有从里面调用短暂运行的用户生成的事件处理程序。

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

您的代码生成文本所需的时间太长，因此浏览器无法识别它作为一个半信任的事件...

Your code takes too long to generate the text, and thus the browser doesn't recognizes it as an semi-trusted event...

然后解决方案是先生成这个文本，并且只有在听取了用户之后 - 手势调用 execCommand 。为了使它成为可能，你可以例如听一个 mousedown 事件来生成文本，只有在 mouseup 事件中才能真正执行copy命令。

The solution is then to generate this text first, and only after listen to an user-gesture to call execCommand. So to make it possible, you can e.g. listen to a mousedown event to generate the text, and only in the mouseup event will you really execute the copy command.

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'）复制到剪贴板失败并显示大文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！