execCommand('copy') 在 Ajax/XHR 回调中不起作用?-前端问题

execCommand(#39;copy#39;) does not work in Ajax / XHR callback?(execCommand(copy) 在 Ajax/XHR 回调中不起作用?)

本文介绍了execCommand('copy') 在 Ajax/XHR 回调中不起作用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

(使用 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.

问题描述

推荐答案