Make clipboard copy-paste work on iphone devices

Question

I have web application, which is mostly designed to be run on mobile devices. I have one button, which will copy to device clipboard the passed text. I am using javascript for that. My code is working great on all mobile devices, except for iphone and ipad. Anybody knows what can be the problem? Here is my code:

CopyToClipboard = function(text, fallback){
    var $t = $('<textarea />');
    $t.val(text).appendTo('body');
    $t.select();
    document.execCommand('copy');
    $t.remove();
    return true;   
};

I have also tried to go this way, but no result, still not working on iphone

function detectIE() {
    var ua = window.navigator.userAgent;

    var msie = ua.indexOf('MSIE ');
    if (msie > 0) {
        // IE 10 or older => return version number
        return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
    }

    var trident = ua.indexOf('Trident/');
    if (trident > 0) {
        // IE 11 => return version number
        var rv = ua.indexOf('rv:');
        return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
    }

    var edge = ua.indexOf('Edge/');
    if (edge > 0) {
        // IE 12 => return version number
        return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
    }

    // other browser
    return false;
}
function copytext(text) {
    if (detectIE()) {
        window.clipboardData.setData('Text', text);
    }
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    window.clipboardData.setData('Text', copytext);
    textField.remove();
}

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    $(textField).remove();
}

Take a look here: http://stackoverflow.com/questions/13015253/copy-to-clipboard-that-also-works-on-mobile — MFazio23, Sep 29 '15 at 18:44
@MFazio23 I have seen that, the solution there is not working also. I don't want to actually use ZeroClipboard, cause as i understand , it is working with flash. — Anna Gabrielyan, Sep 29 '15 at 18:47
I think there is no known way to get any copy-to-clipboard to work in iOS Safari—nor really even in desktop Safari without requiring users to manually type `⌘-C` after your code automatically selects what you want them to copy. But for the future, there’s an open feature bug at https://bugs.webkit.org/show_bug.cgi?id=146336 for implementing `execCommand("copy")` in Safari. — sideshowbarker, Sep 29 '15 at 21:36

score 28 · Accepted Answer · answered Mar 24 '17 at 14:09

Try this. Works for me.

var copy = function(elementId) {

 var input = document.getElementById(elementId);
 var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i);

 if (isiOSDevice) {
   
  var editable = input.contentEditable;
  var readOnly = input.readOnly;

  input.contentEditable = true;
  input.readOnly = false;

  var range = document.createRange();
  range.selectNodeContents(input);

  var selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);

  input.setSelectionRange(0, 999999);
  input.contentEditable = editable;
  input.readOnly = readOnly;

 } else {
   input.select();
 }

 document.execCommand('copy');
}

<input type="text" id="foo" value="text to copy" />
<button onclick="copy('foo')">Copy text</button>

This is a great substitute for directly copying, note that this will select the text and then display the standard iOS Copy|Look Up|Share... buttons, this is great for my use case thanks :o) — Ed Bishop, Oct 31 '18 at 12:21

score 0 · Answer 2 · answered Sep 29 '15 at 18:59

0

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

answered Sep 29 '15 at 18:59

Cube.

483
6
15

Thanks. I have just understand that, I found this, but I don't know how to copy with it https://developer.mozilla.org/en-US/docs/Web/API/Selection – Anna Gabrielyan Sep 29 '15 at 19:30

Make clipboard copy-paste work on iphone devices

2 Answers2

Linked