Copy to clipboard after success in ajax call, works in Chrome but not in Firefox

Question

I need to get password from server after clicking on a button, I made it work in Chrome but for some reason it's not working in Firefox. I've made it work with async: false but that is not a good practice. Here is my code:

Button

<button class="btn" onClick="copyPassword(el1)">Ip address</button>'

Script

function copyPassword(el1) {
    var id = el1;
    $.ajax({
        type: 'GET',
        url: 'copypassword',
        data: {
            "_token": "{{ csrf_token() }}",
            "id": id
        },
        success: function(msg) {
            copyToClipboard(msg);
        }
    });
}

function copyToClipboard(text) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(text).select();
    document.execCommand("copy");
    $temp.remove();
}

This works in Chrome without any warnings, but in Firefox i get this document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.

Is there any way I can make it work like this in Firefox?

A quick google search gives https://stackoverflow.com/a/44638422/2943218 — Carsten Løvbo Andersen, Apr 11 '19 at 07:06
I found that too, I'm asking is there a way to use this in order to make it work in firefox, without using ```async: false``` — Nemanja, Apr 11 '19 at 07:14

Azer · Answer 1 · 2019-04-12T09:03:17.117

The functionality is not the same across browsers. This is quite common in JS/CSS/HTML.

From MDN:

Browser-specific considerations

Section The clipboard and other APIs involved here are evolving rapidly, so there are variations among browsers in how they work.

In Chrome:

You can write to the clipboard like this in all execution contexts - background pages, content scripts, options pages, and popups. You don't actually need "clipboardWrite", even to write to the clipboard outside a user-generated event handler.

In Firefox:

You can write to the clipboard with execCommand in all execution contexts except background pages. In Firefox you can't select text or focus an input field in background pages, so you can't write to the clipboard with execCommand from a background page. The Clipboard Web API doesn't have this limitation. The "clipboardWrite" permission is only supported from version 51 onward. From version 57 onward, you can copy images to the clipboard using the clipboard.setImageData() API. Support for the Clipboard API's navigator.clipboard.writeText() method was added in Firefox 63. When using content scripts, the Clipboard API is available only for HTTPS pages. As a workaround, use messaging between your content scripts and the background script.

The execCommand('copy') API isn't supported in Safari

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

EDIT:

Example of how to use a textarea to store and copy the value (works in FireFox):

<textarea id="textholder"></textarea>
<button onclick="copyPassword()">Get message</button>
<button onclick="copyToClipboard()">Add to clipboard</button>

var input = $('#textholder');

function copyPassword() {

    $.ajax({
        type: 'GET',
        url: 'https://jsonplaceholder.typicode.com/todos/1',

        success: function(msg) {
            input.val(msg.title);
        }
    });
}


function copyToClipboard() {
    input.select();
    document.execCommand("copy");
}

I use a test API in this example but just replace with your own AJAX info and it should work fine. The example code works as is it, so feel free to test it out. Good luck!

EDIT 2:

Here's a version of the script that only uses one button, as requested by the owner of the question.

In this version the API call is run automatically, so that the user can copy the message with only one click.

<textarea id="textholder"></textarea>
<button onclick="copyToClipboard()">Add to clipboard</button>

    var input = $('#textholder');

    function copyPassword() {

        $.ajax({
            type: 'GET',
            url: 'https://jsonplaceholder.typicode.com/todos/1',

            success: function(msg) {
                input.val(msg.title);
            }
        });
    }


    function copyToClipboard() {
        input.select();
        document.execCommand("copy");
    }

    document.onload = copyPassword();

In firefox the use of execCommand("copy") has to be triggered by a user event, such as a click. It cannot be used in automatically run code, not even if that code dispatches an event that you listen to. It has to be a user action in the browser and not a piece of code that triggers it.

So the only way to make this work is using ```async: false``` ? — Nemanja, Apr 11 '19 at 07:19
Another solution that was posted here as a comment is to simply print out the value somewhere and just provide a button to copy it after the ajax call has finished getting the data. https://stackoverflow.com/questions/41094318/firefox-document-execcommand-cut-copy-was-denied-because-it-was-not-calle/44638422#44638422 — Azer, Apr 11 '19 at 07:32
I don't know how to use that in my example. Is there any chance you can help me? — Nemanja, Apr 11 '19 at 07:53
@Nemanja Added an example in my answer. It's tested with firefox and works. — Azer, Apr 11 '19 at 08:58
I misunderstood you, this is an example with two buttons, I'm trying to make it work with only one button. — Nemanja, Apr 12 '19 at 07:13
@Nemanja Here you go. I added an example that only use one button. — Azer, Apr 12 '19 at 09:04
As I can see in your code, this will trigger once document is loaded. I want it to take password once user click on the button, not before it. — Nemanja, Apr 12 '19 at 10:50

Copy to clipboard after success in ajax call, works in Chrome but not in Firefox

1 Answers1