在 iOS 中使用 Javascript 复制到剪贴板

Update! iOS >= 10

Looks like with the help of selection ranges and some little hack it is possible to directly copy to the clipboard on iOS (>= 10) Safari. I personally tested this on iPhone 5C iOS 10.3.3 and iPhone 8 iOS 11.1. However, there seem to be some restrictions, which are:

1. Text can only be copied from <input> and <textarea> elements.
2. If the element holding the text is not inside a <form>, then it must be contenteditable.
3. The element holding the text must not be readonly (though you may try, this is not an "official" method documented anywhere).
4. The text inside the element must be in selection range.

To cover all four of these "requirements", you will have to:

1. Put the text to be copied inside an <input> or <textarea> element.
2. Save the old values of contenteditable and readonly of the element to be able to restore them after copying.
3. Change contenteditable to true and readonly to false.
4. Create a range to select the desired element and add it to the window's selection.
5. Set the selection range for the entire element.
6. Restore the previous contenteditable and readonly values.
7. Run execCommand('copy').

This will cause the caret of the user's device to move and select all the text in the element you want, and then automatically issue the copy command. The user will see the text being selected and the tool-tip with the options select/copy/paste will be shown.

Now, this looks a little bit complicated and too much of an hassle to just issue a copy command, so I'm not sure this was an intended design choice by Apple, but who knows... in the mean time, this currently works on iOS >= 10.

With this said, polyfills like this one could be used to simplify this action and make it cross-browser compatible (thanks @Toskan for the link in the comments).

Working example

To summarize, the code you'll need looks like this:

function iosCopyToClipboard(el) {
var oldContentEditable = el.contentEditable,
oldReadOnly = el.readOnly,
range = document.createRange();


el.contentEditable = true;
el.readOnly = false;
range.selectNodeContents(el);


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


el.setSelectionRange(0, 999999); // A big number, to cover anything that could be inside the element.


el.contentEditable = oldContentEditable;
el.readOnly = oldReadOnly;


document.execCommand('copy');
}

Note that the el parameter to this function must be an <input> or a <textarea>.

Old answer: previous iOS versions

On iOS < 10 there are some restrictions for Safari (which actually are security measures) to the Clipboard API:

• It fires copy events only on a valid selection and cut and paste only in focused editable fields.
• It only supports OS clipboard reading/writing via shortcut keys, not through document.execCommand(). Note that "shorcut key" means some clickable (e.g. copy/paste action menu or custom iOS keyboard shortcut) or physical key (e.g. connected bluetooth keyboard).
• It doesn't support the ClipboardEvent constructor.

So (at least as of now) it's not possible to programmatically copy some text/value in the clipboard on an iOS device using Javascript. Only the user can decide whether to copy something.

It is however possible to select something programmatically, so that the user only has to hit the "Copy" tool-tip shown on the selection. This can be achieved with the exact same code as above, just removing the execCommand('copy'), which is indeed not going to work.

I've searched for some solutions and I've found one that actually works: http://www.seabreezecomputers.com/tips/copy2clipboard.htm

Basically, example could be something like:

var $input = $(' some input/textarea ');
$input.val(result);
if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
var el = $input.get(0);
var editable = el.contentEditable;
var readOnly = el.readOnly;
el.contentEditable = 'true';
el.readOnly = 'false';
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
el.setSelectionRange(0, 999999);
el.contentEditable = editable;
el.readOnly = readOnly;
} else {
$input.select();
}
document.execCommand('copy');
$input.blur();

<input id="copyIos" type="hidden" value="">
var clipboard = new Clipboard('.copyUrl');
//兼容ios复制
$('.copyUrl').on('click',function() {
var $input = $('#copyIos');
$input.val(share_url);
if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
clipboard.on('success', function(e) {
e.clearSelection();
$.sDialog({
skin: "red",
content: 'copy success!',
okBtn: false,
cancelBtn: false,
lock: true
});
console.log('copy success!');
});
} else {
$input.select();
}
//document.execCommand('copy');
$input.blur();
});

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.

Problem: iOS Safari only allows document.execCommand('copy') for text within a contentEditable container.

Solution: detect iOS Safari and quickly toggle contentEditable before executing document.execCommand('copy').

The function below works in all browsers. Call with a CSS Selector or HTMLElement:

function copyToClipboard(el) {


// resolve the element
el = (typeof el === 'string') ? document.querySelector(el) : el;


// handle iOS as a special case
if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {


// save current contentEditable/readOnly status
var editable = el.contentEditable;
var readOnly = el.readOnly;


// convert to editable with readonly to stop iOS keyboard opening
el.contentEditable = true;
el.readOnly = true;


// create a selectable range
var range = document.createRange();
range.selectNodeContents(el);


// select the range
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
el.setSelectionRange(0, 999999);


// restore contentEditable/readOnly to original state
el.contentEditable = editable;
el.readOnly = readOnly;
}
else {
el.select();
}


// execute copy command
document.execCommand('copy');
}

input { font-size: 14px; font-family: tahoma; }
button { font-size: 14px; font-family: tahoma; }

<input class="important-message" type="text" value="Hello World" />
<button onclick="copyToClipboard('.important-message')">Copy</button>

My solution was created by combining others answers from this page.

Unlike the other answers, it does not require that you already have an element on the page. It will create its own textarea, and clean up the mess afterwards.

function copyToClipboard(str) {
var el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style = {position: 'absolute', left: '-9999px'};
document.body.appendChild(el);


if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
// save current contentEditable/readOnly status
var editable = el.contentEditable;
var readOnly = el.readOnly;


// convert to editable with readonly to stop iOS keyboard opening
el.contentEditable = true;
el.readOnly = true;


// create a selectable range
var range = document.createRange();
range.selectNodeContents(el);


// select the range
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
el.setSelectionRange(0, 999999);


// restore contentEditable/readOnly to original state
el.contentEditable = editable;
el.readOnly = readOnly;
} else {
el.select();
}


document.execCommand('copy');
document.body.removeChild(el);
}

This is my cross browser implementation (including iOS)

You can test it by running the snippet below

Example:

copyToClipboard("Hello World");

/**
* Copy a string to clipboard
* @param  {String} string         The string to be copied to clipboard
* @return {Boolean}               returns a boolean correspondent to the success of the copy operation.
* @see https://stackoverflow.com/a/53951634/938822
*/
function copyToClipboard(string) {
let textarea;
let result;


try {
textarea = document.createElement('textarea');
textarea.setAttribute('readonly', true);
textarea.setAttribute('contenteditable', true);
textarea.style.position = 'fixed'; // prevent scroll from jumping to the bottom when focus is set.
textarea.value = string;


document.body.appendChild(textarea);


textarea.focus();
textarea.select();


const range = document.createRange();
range.selectNodeContents(textarea);


const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);


textarea.setSelectionRange(0, textarea.value.length);
result = document.execCommand('copy');
} catch (err) {
console.error(err);
result = null;
} finally {
document.body.removeChild(textarea);
}


// manual copy fallback using prompt
if (!result) {
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
const copyHotkey = isMac ? '⌘C' : 'CTRL+C';
result = prompt(`Press ${copyHotkey}`, string); // eslint-disable-line no-alert
if (!result) {
return false;
}
}
return true;
}

Demo: <button onclick="copyToClipboard('It works!\nYou can upvote my answer now :)') ? this.innerText='Copied!': this.innerText='Sorry :(' ">Click here</button>


<p>
<textarea placeholder="(Testing area) Paste here..." cols="80" rows="4"></textarea>
</p>

NOTE: It doesn't work when it is not initiated by the user, like timeouts or any async event!

It must come from a trusted event like called from a click event on a button

This one worked for me for a readonly input element.

copyText = input => {
const isIOSDevice = navigator.userAgent.match(/ipad|iphone/i);


if (isIOSDevice) {
input.setSelectionRange(0, input.value.length);
} else {
input.select();
}


document.execCommand('copy');
};

My function for ios and other browsers copying to clipboard after tested on ios: 5c,6,7

/**
* Copies to Clipboard value
* @param {String} valueForClipboard value to be copied
* @param {Boolean} isIOS is current browser is Ios (Mobile Safari)
* @return {boolean} shows if copy has been successful
*/
const copyToClipboard = (valueForClipboard, isIOS) => {
const textArea = document.createElement('textarea');
textArea.value = valueForClipboard;


textArea.style.position = 'absolute';
textArea.style.left = '-9999px'; // to make it invisible and out of the reach
textArea.setAttribute('readonly', ''); // without it, the native keyboard will pop up (so we show it is only for reading)


document.body.appendChild(textArea);


if (isIOS) {
const range = document.createRange();
range.selectNodeContents(textArea);


const selection = window.getSelection();
selection.removeAllRanges(); // remove previously selected ranges
selection.addRange(range);
textArea.setSelectionRange(0, valueForClipboard.length); // this line makes the selection in iOS
} else {
textArea.select(); // this line is for all other browsers except ios
}


try {
return document.execCommand('copy'); // if copy is successful, function returns true
} catch (e) {
return false; // return false to show that copy unsuccessful
} finally {
document.body.removeChild(textArea); // delete textarea from DOM
}
};

above answer about contenteditable=true. I think only belongs to divs. And for <textarea> is not applicable.

isIOS variable can be checked as

const isIOS = navigator.userAgent.match(/ipad|ipod|iphone/i);

nice one, here's the typescript refactor of above in case anyone is interested (written as ES6 module):

type EditableInput = HTMLTextAreaElement | HTMLInputElement;


const selectText = (editableEl: EditableInput, selectionStart: number, selectionEnd: number) => {
const isIOS = navigator.userAgent.match(/ipad|ipod|iphone/i);
if (isIOS) {
const range = document.createRange();
range.selectNodeContents(editableEl);


const selection = window.getSelection(); // current text selection
selection.removeAllRanges();
selection.addRange(range);
editableEl.setSelectionRange(selectionStart, selectionEnd);
} else {
editableEl.select();
}
};


const copyToClipboard = (value: string): void => {
const el = document.createElement('textarea'); // temporary element
el.value = value;


el.style.position = 'absolute';
el.style.left = '-9999px';
el.readOnly = true; // avoid iOs keyboard opening
el.contentEditable = 'true';


document.body.appendChild(el);


selectText(el, 0, value.length);


document.execCommand('copy');
document.body.removeChild(el);


};


export { copyToClipboard };

Clipboard API was added in Safari 13.1, see here https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/

It's now as simple as navigator.clipboard.writeText("Text to copy")

iOS 13.4 and newer

As of version 13.4, iOS Safari supports the modern async clipboard API:

• MDN: Clipboard API
• Can I Use: clipboard.writeText

Like with everything in JavaScript, the newer API is about 1000x nicer but you still need gross fallback code, since a bunch of your users will be on old versions for some years.

Here's how to use the new clipboard API with the code in the original question:

function CopyUrl($this){
var querySelector = $this.next().attr("id");
var emailLink = document.querySelector("#"+querySelector);


if (navigator.clipboard) {
var myText = emailLink.textContent;
navigator.clipboard.writeText(myText).then(function() {
// Do something to indicate the copy succeeded
}).catch(function() {
// Do something to indicate the copy failed
});
} else {
// Here's where you put the fallback code for older browsers.
}
}

This improves Marco's answer by allowing the text to be passed as a variable. This works on ios >10. This does not work on Windows.

function CopyToClipboardIOS(TheText) {
var el=document.createElement('input');
el.setAttribute('style','position:absolute;top:-9999px');
el.value=TheText;
document.body.appendChild(el);
var range = document.createRange();
el.contentEditable=true;
el.readOnly = false;
range.selectNodeContents(el);
var s=window.getSelection();
s.removeAllRanges();
s.addRange(range);
el.setSelectionRange(0, 999999);
document.execCommand('copy');
el.remove();
}

Update: Looks like with latest browsers you can now use the Clipboard API:

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

Using navigator.clipboard.writeText('MyText') will write any String you need in the clipboard, no need for inputs, document.execCommand('copy') etc...