execCommand('copy') 在 Ajax/XHR 回调中不起作用?

2022-01-20 00:00:00 复制 javascript html ajax execcommand

(使用 Chrome 44 测试)

(Tested using Chrome 44)

期望行为:发出 XHR 请求，将结果放入文本区域，选择文本，然后复制到剪贴板.

Desired behaviour: Make XHR request, put result in text area, select text, and copy to clipboard.

实际行为:在成功的 XHR 请求时，将结果放入文本区域并选择它，但无法将结果复制到剪贴板.但是如果我在 XHR 回调之外启动复制，它就可以工作.

Actual behaviour: On successful XHR request, puts the result in text area and selects it, but fails to copy result to clipboard. But if I initiate the copy outside of the XHR callback, it works.

示例 html 页面:

var selectAndCopy = function() {
  // Select text
  var cutTextarea = document.querySelector('#textarea');
  cutTextarea.select();
  // Execute copy
  var successful = document.execCommand('copy');
  var msg = successful ? 'successful' : 'unsuccessful';
  console.log('Cutting text command was ' + msg);
};

var fetchCopyButton = document.querySelector('#fetch_copy');
fetchCopyButton.addEventListener('click', function(event) {
  var xhr = new XMLHttpRequest();
  xhr.open('get', 'http://httpbin.org/ip');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        // Set text
        var textarea = document.querySelector('#textarea');
        textarea.value = xhr.responseText;

        selectAndCopy();
      }
    }
  };
  xhr.send();
});

var copyButton = document.querySelector('#copy');
copyButton.addEventListener('click', function(event) {
  selectAndCopy();
});

<html>

<head>
</head>

<body>
  <p>
    <textarea id="textarea">Hello, I'm some text!</textarea>
  </p>
  <p>
    <button id="fetch_copy">Fetch Data and Copy Textarea</button>
    <button id="copy">Copy Textarea</button>
  </p>
</body>

</html>

如果您按下获取数据并复制文本区域"按钮，则数据成功获取但未复制.如果您按下复制文本区域"按钮，则会按预期复制文本.我尝试了许多请求/复制的组合来尝试让它工作但无济于事(包括在获取数据后以编程方式按下复制按钮).有谁知道这里发生了什么?这是安全功能还是什么?

If you press the "Fetch Data and Copy Textarea" button the data is successfully fetched but not copied. If you press the "Copy Textarea" button the text is copied as expected. I've tried many combinations of request/copy to try and get it to work but to no avail (including programmatically pressing the copy button after fetching data). Does anyone know what's going on here? Is this a security feature or something?

如果可能的话，我不希望用户必须按两个按钮来获取和复制.

I don't want the user to have to press two buttons to fetch and copy if possible.

推荐答案

您只能触发复制到系统剪贴板以直接响应受信任的用户操作，例如 click 事件.

You can only trigger a copy to the system clipboard in direct response to a trusted user action, such as a click event.

规范:http://www.w3.org/TR/clipboard-apis/#integration-with-rich-text-editing-apis

相关文章