I'm using this function to copy a URL to the clipboard:
function CopyUrl($this){
var querySelector = $this.next().attr("id");
var emailLink = document.querySelector("#"+querySelector);
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', false, null);
var msg = successful ? 'successful' : 'unsuccessful';
if(true){
$this.addClass("copied").html("Copied");
}
} catch(err) {
console.log('Oops, unable to copy');
}
// Remove the selections - NOTE: Should use
// removeRange(range) when it is supported
window.getSelection().removeAllRanges();
}
Everything works fine on desktop browsers, but not on iOS devices, where my function returns successfully, but the data isn't copied to the clipboard at all. What's causing this and how could I solve this problem?
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:
Text can only be copied from <input> and <textarea> elements.
If the element holding the text is not inside a <form>, then it must be contenteditable.
The element holding the text must not be readonly (though you may try, this is not an "official" method documented anywhere).
The text inside the element must be in selection range.
To cover all four of these "requirements", you will have to:
Put the text to be copied inside an <input> or <textarea> element.
Save the old values of contenteditable and readonly of the element to be able to restore them after copying.
Change contenteditable to true and readonly to false.
Create a range to select the desired element and add it to the window's selection.
Set the selection range for the entire element.
Restore the previous contenteditable and readonly values.
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();
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
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>
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.
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);
}
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.
}
}
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")
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 };
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);
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...
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();
}
<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();
});
Scenario : User makes onClick on a textarea(somewhere between the content without selecting any character just a click). Using javascript need to find the position of the cursor.
We had following script :
comp.focus();
var range = document.selection.createRange();
range.text='|';
var oldval = comp.value;
var pos= oldval.index('|');
Code was running with IE <11. With IE 11 ''dcoument.selection' was undefined. Then document says with IE11 "document.selection" should be "document.getSelection". Hence tried the following :
comp.focus();
var range = document.getSelection().createRange();
WIth ver11 , "document.getSelection().createRange()" says errors : Object doesnt support the propery or mehtod 'createRange()'.
Then tried to get object of 'var sel = document.getSelection()'. When i try to print as alert 'sel' , it says 'cannot get property toString on undefiend or null references'
1. With older version document.selection.createRange worked well even if there isnt any character seelcted/highlighted. But with IE11 its not as such.
2. Please let me know how to createRange evne if there isnt any selected characters.
Need solution/suggestion to proceed.......
I use this function to get cursor position:
(function($) {
$.fn.getCursorPosition = function() {
var input = this.get(0);
if (!input) return; // No (input) element found
if ('selectionStart' in input) {
// Standard-compliant browsers
return input.selectionStart;
} else if (document.selection) {
// IE
input.focus();
var sel = document.selection.createRange();
var selLen = document.selection.createRange().text.length;
sel.moveStart('character', -input.value.length);
return sel.text.length - selLen;
}
}
})(jQuery);
The following code returns cursor position:
comp.getCursorPosition();
works fine with IE11
I'm developing a mobile banking application and I'm interested in formatting the currency amount inputs in real time.
I've already tested autoNumeric plugin and jQuery Format Currency Plugin but both have cursor position issues on Android 2.* browsers.
Does anyone have a JavaScript solution compatible with this browsers?
I don't know about autoNumeric, but http://code.google.com/p/jquery-formatcurrency/ looks pretty good. The jsFiddle example you posted doesn't place the caret correctly on my desktop browser, but this does, and on my (Jellybean) Android phone as well. (On Gingerbread, the blinking cursor bar may jump to the end of the line, but you will still be editing where it last was.) Try their demo: http://www.bendewey.com/code/formatcurrency/demo/format_as_you_type.html
I usually use accounting.js
You can download it from http://openexchangerates.github.io/accounting.js/#download
It's quite easy to use. You can see how it works from that same download page.
I created a couple javascript functions which i use to do the cursor management:
function formatMoney(myField){
if(myField.selectionStart || myField.selectionStart == '0'){
var len = myField.value.length;
var caretPos = doGetCaretPosition(myField);
myField.value = accounting.formatMoney(myField.value);
var newlen = myField.value.length;
setCaretPosition(myField, newlen != len ? (newlen > len ? caretPos + 1 : caretPos - 1) : caretPos);
}
}
function doGetCaretPosition (ctrl) {
var CaretPos = 0;
// IE Support
if (document.selection) {
ctrl.focus ();
var Sel = document.selection.createRange ();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}
function setCaretPosition(elem, caretPos) {
elem.value = elem.value;
if(elem != null) {
if(elem.createTextRange) {
var range = elem.createTextRange();
range.move('character', caretPos);
range.select();
}
else {
if(elem.selectionStart) {
elem.focus();
elem.setSelectionRange(caretPos, caretPos);
}
else
elem.focus();
}
}
}
You can use the functions with the text field as:
<input id="myField" type="text" onkeyup="formatMoney(this);" onChange="formatMoney(this);" onBlur="formatMoney(this);" />
The getting and the setting caret position functions were gotten from here: Set keyboard caret position in html textbox
I tested it on Android 2.1 emulator. Though the emulator was slow but it seemed to be working. You can find the screenshot here: https://www.dropbox.com/s/9ximuwh64kadiea/shot.JPG?dl=0
Here's an open source, well contributed, well commited library : https://github.com/plentz/jquery-maskmoney
Seems to answers your need, doesn't it ?
Havent't tested it under Android though.
It seems this jQuery plugin - NumBox - aims to provide solution to your problem.
Actually i am trying to set the cursor to a specific node inside a html editor (which uses a contenteditable iframe). For example i have several paragraphs and want the cursor to move to the start of the previous paragraph.
Unfortunatly, the Internet Explorers range object does not support setStartBefore and setStartAfter. The ierange project is not an option - the solution i am looking for needs to work with IE out of the box.
How do i set the cursor in IE?
In Firefox the solution is straight forward:
// sets the cursor position (start defines, if cursor is needed at the start or end of the node)
function setCursor(editor, node, start){
var tn = editor.getDoc().createTextNode("."); // gets the editors document
if (start){
node.insertBefore(tn, node.firstChild);
}
else node.appendChild(tn);
rng = editor.selection.getRng(); // gets the browsers range object for the users selection
rng.selectNode(tn);
rng.setStartBefore(tn);
rng.setStartAfter(tn);
ed.selection.setRng(rng);
node.removeChild(tn); // removes the caret node - curser is placed now
}
You could use my Rangy project for this. The code would then be the same in all browsers:
function setCursor(element, start) {
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
rangy.init();
var range = rangy.createRange(doc);
range.selectNodeContents(element);
range.collapse(start);
rangy.getSelection(win).setSingleRange(range);
}
Alternatively, this particular case isn't too tricky without a library:
function setCursor(element, start) {
var doc = element.ownerDocument || element.document;
if (typeof doc.createRange != "undefined") {
var range = doc.createRange();
range.selectNodeContents(element);
range.collapse(start);
var win = doc.defaultView || doc.parentWindow;
var sel = win.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof doc.body.createTextRange != "undefined") {
var textRange = doc.body.createTextRange();
if (start) {
textRange.moveToElementText(element);
textRange.collapse(start);
} else {
var markerEl = doc.createElement("span");
markerEl.innerHTML = "\u00A0";
element.appendChild(markerEl);
textRange.moveToElementText(markerEl);
element.removeChild(markerEl);
}
textRange.select();
}
}
Working with the Cursor Position
(This solution works for me in IE, Firefox and Opera)
I'm building a wysiwyg-editor with an editable iframe using document.execCommand(). Now i need to use the "insertHTML" command which works perfectly in Chrome and Firefox but of course it doesn't work in Internet Explorer:
function run() {
document.getElementById("target").focus();
document.execCommand("insertHTML", false, "<b>ins</b>");
}
<div contenteditable id="target">contenteditable</div>
<button onclick="run()">contenteditable.focus() + document.execCommand("insertHTML", false, "<b>ins</b>")</button>
What is the standard solution to this problem? It's okay if it only works in IE8 but IE7-support would be nice too.
In IE <= 10 you can use the pasteHTML method of the TextRange representing the selection:
var doc = document.getElementById("your_iframe").contentWindow.document;
if (doc.selection && doc.selection.createRange) {
var range = doc.selection.createRange();
if (range.pasteHTML) {
range.pasteHTML("<b>Some bold text</b>");
}
}
UPDATE
In IE 11, document.selection is gone and insertHTML is still not supported, so you'll need something like the following:
https://stackoverflow.com/a/6691294/96100
In case you haven't found anything yet,
I had a button that would add html into an iframe, and was causing an error in IE8 when I clicked the button and no text was selected (i.e. when I had the blinking caret). It turned out that the button itself was getting selected (despite having unselectable="on"), and causing javascript to throw up the error. When I changed the button to a div (with unselectable on) it worked fine, in IE8 and FF.
Hope this helps.
I know this is extremely old, but since IE is still a problem, here is a better way which does not even use execCommand.
This is missing some checks, like ensuring you're in the right container to be adding an image.
var sel = window.getSelection();
var range = sel.getRangeAt(0);
var frag = document.createDocumentFragment();
var img = document.createElement("img");
// add image properties here
frag.appendChild(img);
range.insertNode(frag);
var doc = document.getElementById("your_iframe").contentWindow.document;
// IE <= 10
if (document.selection){
var range = doc.selection.createRange();
range.pasteHTML("<b>Some bold text</b>");
// IE 11 && Firefox, Opera .....
}else if(document.getSelection){
var range = doc.getSelection().getRangeAt(0);
var nnode = doc.createElement("b");
range.surroundContents(nnode);
nnode.innerHTML = "Some bold text";
};