execCommand（'copy'）在Ajax / XHR回调中不起作用？

小编典典

execCommand（'copy'）在Ajax / XHR回调中不起作用？

ajax

（使用Chrome 44测试）

所需行为 ：发出XHR请求，将结果放入文本区域，选择文本，然后复制到剪贴板。

实际行为 ：成功执行XHR请求后，将结果放在文本区域中并选择它，但是无法将结果复制到剪贴板。但是，如果我在XHR回调之外启动副本，则可以正常工作。

示例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>

如果按“获取数据并复制文本区域”按钮，则数据已成功获取但未复制。如果按“复制文本区域”按钮，则文本将按预期复制。我尝试了请求/复制的许多组合以尝试使其正常工作，但无济于事（包括在获取数据后以编程方式按下复制按钮）。有人知道这是怎么回事吗？这是一项安全功能吗？

我不希望用户尽可能按下两个按钮来进行获取和复制。

阅读 356

2020-07-26

共1个答案

小编典典

您只能直接响应受信任的用户操作（例如click事件）而触发向系统剪贴板的复制。

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

2020-07-26