javascript - execCommand('copy') does not work in AjaxXHR callback?

(Tested using Chrome 44)

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

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.

Example html page:

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

(Tested using Chrome 44)

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

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.

Example html page:

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.

Share Improve this question edited Jul 27, 2017 at 12:04 Kukeltje 12.3k4 gold badges26 silver badges47 bronze badges asked Aug 10, 2015 at 17:47 aeoliant 3872 silver badges10 bronze badges

So how did you solve it in the end? Could you update the question? – ChrisGeo Commented Jan 31, 2017 at 19:14
@ChrisGeo I ended up just selecting the text (but not copying it). I realized users probably wouldn't be happy if I overwrote something in their copy buffer. Trevor's answer below looks like it will work (if you are ok with synchronous XHR) – aeoliant Commented Mar 7, 2017 at 21:36
This problem is solved in my ans :) here: stackoverflow.com/questions/43380921/… – Nishanth Matha Commented Apr 13, 2017 at 5:03
Perhaps, you could do something which I mentioned here: SOLVED: document execCommand copy not working with AJAX – Nishanth Matha Commented Apr 13, 2017 at 7:54
there's a hack here using setTimeout if the action was initiated from a trusted event: stackoverflow.com/a/40826549/3649573 – AlbinoDrought Commented Apr 5, 2019 at 22:53

Add a comment |

2 Answers 2

Sorted by: Reset to default 17

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

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

DISCLAIMER: Synchronous XMLHttpRequests are not recommended on the main thread. Please read this and make sure you know what you're doing before using this solution. THIS IS NOT RECOMMENDED FOR PRODUCTION USE.

If you make the XMLHttpRequest synchronous, this will work. You just have to add false as the third parameter to xhr.open(...):

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - execCommand('copy') does not work in AjaxXHR callback? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)