Firefox - document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler

Question

I am developing a single-page app, I have a button on the page, when a user clicks the button I would like to make an ajax call to my server, and then copy the returned value (via callback) to the user's clipboard.

Each component works in isolation, but when I glue them together Firefox returns the following error:

document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler

I would like to know the specifics of this error, but there is absolutely no information online; what are the limiting conditions that trigger this error, is it a stack depth, a timeout, etc?

Answer 1

on firefox it only work with click handler, reference Interact_with_the_clipboard

Answer 2

Firefox will display the same error message if the manifest is missing the clipboardWrite permission.

Answer 3

I just had to deal with this issue.

For me the solution was simply set async to false since the call is fast enough.

Answer 4

You can view link about clipboard. Other way, you use synchronous. Example:

 $.ajax({
   method: "GET",
   async: false,
   url: {your_url},
   success: function(res) {
     let link= res.link;
     let temp_raw = $("<input>");
     $("body").append(temp_raw);
     temp_raw.val(link);
     temp_raw.select();
     document.execCommand("copy");
     temp_raw.remove();
   }
});