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


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?

on firefox it only work with click handler, reference Interact_with_the_clipboard


I just had to deal with this issue.

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


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