Javascript Copy To Clipboard Safari iOS – Working example

Last week I was working on a mobile web app (a PWA version) and had to add copy to clipboard functionality. I soon discovered that document.execCommand() does not work on iOS Safari generally as it should. WTF! After putting my back into it, I got this working. This tutorial has a working example of how to make JavaScript copy to clipboard work on iOS Safari. Let’s go.

What is Copy to Clipboard?

Let’s say you are running a discount coupon campaign in your app and you want the user to copy the coupon code by clicking on a button or a CTA.

What is document.execCommand()?

document.execCommand(‘copy’) lets you copy text to your clipboard using JavaScript. It returns a Boolean that is false if the command is unsupported or disabled.

Copy to clipboard does not work on iOS Safari

By just using,

document.execCommand('copy');

iOS Safari does not copy the text to the clipboard. It works on other devices such as computer browsers and Android browsers. But not on iOS.

A working example of copy to clipboard using JavaScript

Let’s see the code block of how to make copy to clipboard work on iOS Safari with JavaScript. This solution, in general, will also work for other devices and browsers. So this is a cross-device/browser solution.

function copyToClipboard(textToCopy) {
  var textArea;

  function isOS() {
    //can use a better detection logic here
    return navigator.userAgent.match(/ipad|iphone/i);
  }

  function createTextArea(text) {
    textArea = document.createElement('textArea');
    textArea.readOnly = true;
    textArea.contentEditable = true;
    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 copyTo() {
    document.execCommand('copy');
    document.body.removeChild(textArea);
  }

  createTextArea(textToCopy);
  selectText();
  copyTo();
}

Code explanation

The idea is to create a fake text area, add it to DOM, set contentEditable & readOnly as true. Create a range to select the desired element and add it to the window’s selection. Set the selection range for the entire element. And then run execCommand('copy'). You may notice a huge number (999999) inside setSelectionRange() method. Well, it is to cover anything that could be inside the element.

Test run

After using the code, copy to clipboard is working on the following devices and browsers.

I have not mentioned versions specifically because I tested on the latest versions available to me at the time of writing this post.

Read more about the document.execCommand() method from MDN.

Give me a shout out in the comments section if the code has issues or it is not working for you. You can also contact me.