Javascript Copy To Clipboard on safari?

Question

It may be duplicate question but i didnt find the solution for this.

I am trying to copy text on button click. Its working on chrome, mozilla(working on on windows and mac but not on linux). And its not working on safari.

I am using document.execCommand("copy") command for copy.

Is safari support this command?

Is there any way which will supports to all browsers?

Answer 1

Please check my solution.

It works on Safari (tested on iPhone 7 and iPad) and on other browsers.

window.Clipboard = (function(window, document, navigator) {
    var textArea,
        copy;

    function isOS() {
        return navigator.userAgent.match(/ipad|iphone/i);
    }

    function createTextArea(text) {
        textArea = document.createElement('textArea');
        textArea.value = text;
        document.body.appendChild(textArea);
    }

    function selectText() {
        var range,
            selection;

        if (isOS()) {
            range = document.createRange();
            range.selectNodeContents(textArea);
            selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            textArea.setSelectionRange(0, 999999);
        } else {
            textArea.select();
        }
    }

    function copyToClipboard() {        
        document.execCommand('copy');
        document.body.removeChild(textArea);
    }

    copy = function(text) {
        createTextArea(text);
        selectText();
        copyToClipboard();
    };

    return {
        copy: copy
    };
})(window, document, navigator);

// How to use
Clipboard.copy('text to be copied');

https://gist.github.com/rproenca/64781c6a1329b48a455b645d361a9aa3 https://fiddle.jshell.net/k9ejqmqt/1/

Hope that helps you.

Regards.

Answer 2

Recently I stumbled upon same issue and found out following:

document.execCommand("copy") works without any issue now in Safari.

If you have a specific use case of copy command not working only in safari, one of the things that you may want to check is if your copy command is being run inside an API callback or in some other similar asynchronous fashion. Also, copying in Safari will only work if it is coming from DOM event (console testing won't work).

For me, my text to be copied was coming from async call's response. I had to move API call outside of onClick to prefetch the text and then, only do the copying of that text when copy button is clicked. Worked!

Following code will work without any issue in Safari (given its directly written to DOM event handler like onClick):

var clipBoardElem = document.createElement("input");
document.body.appendChild(clipBoardElem);
clipBoardElem.value = "text";
clipBoardElem.select();
var successfulCopy = document.execCommand('copy');

Once done, you can remove temp elem:

document.body.removeChild(clipBoardElem)