Asked : Nov 17
Viewed : 18 times
What is the best way to copy text to the clipboard (multi-browser)?
I have tried:
function copyToClipboard(text) {
if (window.clipboardData) { // Internet Explorer
window.clipboardData.setData("Text", text);
} else {
unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
clipboardHelper.copyString(text);
}
}
But in Internet Explorer, it gives a syntax error. In Firefox, it says the unsafe window is not defined.
A nice trick without using Flash: How does Trello access the user's clipboard?
Nov 17
Step 1) Add HTML:
<!-- The text field -->
<input type="text" value="Hello World" id="myInput">
<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>
Step 2) Add JavaScript:
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText.value);
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
answered Jan 13
Best Way to Copy the text inside the text field. Use navigator.clipboard.writeText.
<input type="text" value="Hello World" id="myId">
<button onclick="myFunction()" >Copy text</button>
<script>
function myFunction() {
var copyText = document.getElementById("myId");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
}
</script>
answered Jan 13
I use this very successfully (without jQuery or any other framework).
function copyToClp(txt){
var m = document;
txt = m.createTextNode(txt);
var w = window;
var b = m.body;
b.appendChild(txt);
if (b.createTextRange) {
var d = b.createTextRange();
d.moveToElementText(txt);
d.select();
m.execCommand('copy');
}
else {
var d = m.createRange();
var g = w.getSelection;
d.selectNodeContents(txt);
g().removeAllRanges();
g().addRange(d);
m.execCommand('copy');
g().removeAllRanges();
}
txt.remove();
}
Warning
Tabs are converted to spaces (at least in Chrome).
answered Jan 13
A very common need when building websites is the ability to copy text to the clipboard with a single button click. Javascript can easily do this in five short steps, Create an <textarea> element to be appended to the document. Set its value to the string that we want to copy to the clipboard.,Use Document.execCommand('copy') to copy the contents of the <textarea> to the clipboard., Bear in mind that this method will not work everywhere, but only as a result of a user action (e.g. inside a click event listener), due to the way Document.execCommand() works.
const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};
const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};
answered Jan 13