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

now after 4 years of this question,

safari added Clipboard API !

you can write & read texts and any arbitrary data to clipboard on safari (in iOS from v13.4 & desktop v13.1 onwards) .

MDN docs about Clipboard : The Clipboard interface implements the Clipboard API, providing—if the user grants permission—both read and write access to the contents of the system clipboard. The Clipboard API can be used to implement cut, copy, and paste features within a web application.

This is how you can achieve what you want:

navigator.clipboard.writeText("YOUR_TEXT").then(function() {

  /* clipboard successfully set */

}, function() {

  /* clipboard write failed */

});

Answer 3

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)

Answer 4

Because the first answer doesn't work for me on iPhone 10 Safari I have tried to find an other solution and I found one described here

Basically it says a very similar solution but different syntax:

supported by "IE 10+, Chrome 43+, Firefox 41+, and Opera 29+"

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
  // Select the email link anchor text  
  var emailLink = document.querySelector('.js-emaillink');
  var range = document.createRange();
  range.selectNode(emailLink);
  window.getSelection().addRange(range);

  try {
    // Now that we've selected the anchor text, execute the copy command  
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  // Remove the selections - NOTE: Should use
  // removeRange(range) when it is supported  
  window.getSelection().removeAllRanges();
});

body {
  padding: 10px;
}

<p>Email me at <a class="js-emaillink" href="mailto:chriscoyier@gmail.com">chriscoyier@gmail.com</a></p>

<p><button class="js-emailcopybtn">Copy Email</button></p>

It also mentions a lib called clipboardjs what just looks great.

In my case this simple js code works on:

• iPhone 10 Safari
• chrome (android / pc (67.0.3396.79))
• opera (pc (53.0.2907.68))

Unfortunately it doesn't work:

• pc / android Firefox (60.0.1 (64-bit))

In case of Firefox the simple select and copy does the trick.

element.select();
document.execCommand('copy');

Answer 5

I found that for safari the text needs to be selected before document.execCommand() works.

Also, addRange() is not supported for other browsers (deprecated in Chrome), which means there are instances that it doesn't properly merge the selection and the range together. What this means for user experience was the user would need to click twice in Safari for the value to be copied. Adding .removeAllRanges() before adding the range will help make sure you are grabbing the right selection for the copy. Unclear if you still need the second .removeAllRanges() but I kept it to be safe.

 copy(id) {
    var configId = document.querySelector(id);
    var range = document.createRange();
    range.selectNode(configId);
    var selection = window.getSelection()
    selection.removeAllRanges();
    selection.addRange(range);

    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      console.log('Copy command was ' + msg);
    } catch (err) {
      console.log('Oops, unable to copy');
    }

    selection.removeAllRanges();
  }

To use (within same class):

<Button icon="copy" onClick={() => {this.copy(id)}}/>

id could be any html selector

This has worked for me in Chrome and Safari.

Answer 6

According to CanIUse, Safari on iOS doesn't support document.execCommand('copy'), probably because of security reasons.

Answer 7

I had the same problem - it turned out my issue was caused because I was creating a temporary select element to copy the text from, which is fine, but I was also hiding it via various methods, the culprit being element.style.width = 0. Removing that and using other methods to hide it solved my issue.

Hope this helps anyone running into the same problem.