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.
Device | Browsers |
iPhone (iOS >= 10) | Safari, Chrome |
Mac | Chrome, FF, Safari |
Windows | Chrome, IE, FF |
Android | Chrome, FF |
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.
its not working on ios mac browser
for safari browser in imac browser i use this above code but it does not copy the text while pasting nothing past
I will check…