Question

（使用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>

如果按“获取数据并复制文本区域”按钮，则会成功提取数据但不会复制。如果按“复制文本区域”按钮，文本将按预期复制。我已经尝试了许多请求/复制组合来尝试让它工作但无济于事（包括在获取数据后以编程方式按下复制按钮）。有谁知道这里发生了什么？这是安全功能还是什么？

我不希望用户必须按两个按钮来获取和复制。

Answer 1

您只能直接回复受信任的用户操作（例如click事件），才能将副本触发到系统剪贴板。

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

Answer 2

如果您使XMLHttpRequest同步，这将有效。您只需将false添加为xhr.open(...)的第三个参数：

＆＃13;

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', false);
  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();
});

＆＃13;

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

＆＃13;

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

2 个答案: