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 unsafeWindow is not defined.
A nice trick without using Flash: How does Trello access the user's clipboard?
This question is related to
javascript
clipboard
copy-paste
clipboard.js is a small, non-Flash, utility that allows copying of text or HTML data to the clipboard. It's very easy to use, just include the .js and use something like this:
<button id='markup-copy'>Copy Button</button>
<script>
document.getElementById('markup-copy').addEventListener('click', function() {
clipboard.copy({
'text/plain': 'Markup text. Paste me into a rich text editor.',
'text/html': '<i>here</i> is some <b>rich text</b>'
}).then(
function(){console.log('success'); },
function(err){console.log('failure', err);
});
});
</script>
clipboard.js is also on GitHub.
Note: This has been deprecated now. Migrate to here.
After searching a solution that supports Safari and other browsers (Internet Explorer 9 and later),
I use the same as GitHub: ZeroClipboard
http://zeroclipboard.org/index-v1.x.html
HTML
<html>
<body>
<button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
<script src="ZeroClipboard.js"></script>
<script src="main.js"></script>
</body>
</html>
JavaScript
var client = new ZeroClipboard(document.getElementById("copy-button"));
client.on("ready", function (readyEvent) {
// alert( "ZeroClipboard SWF is ready!" );
client.on("aftercopy", function (event) {
// `this` === `client`
// `event.target` === the element that was clicked
event.target.style.display = "none";
alert("Copied text to clipboard: " + event.data["text/plain"]);
});
});
If you want a really simple solution (takes less than 5 minutes to integrate) and looks good right out of the box, then Clippy is a nice alternative to some of the more complex solutions.
It was written by a cofounder of GitHub. Example Flash embed code below:
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="110"
height="14"
id="clippy">
<param name="movie" value="/flash/clippy.swf"/>
<param name="allowScriptAccess" value="always"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param NAME="FlashVars" value="text=#{text}"/>
<param name="bgcolor" value="#{bgcolor}"/>
<embed
src="/flash/clippy.swf"
width="110"
height="14"
name="clippy"
quality="high"
allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
FlashVars="text=#{text}"
bgcolor="#{bgcolor}"/>
</object>
Remember to replace #{text} with the text you need copied, and #{bgcolor} with a color.
The other methods will copy plain text to the clipboard. To copy HTML (i.e., you can paste results into a WYSIWYG editor), you can do the following in Internet Explorer only. This is is fundamentally different from the other methods, as the browser actually visibly selects the content.
// Create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
contentEditable = true;
}
editableDiv.appendChild(someContentElement);
// Select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();
r.execCommand("Copy");
// Deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();
This solution was found here. The document.execCommand("copy"); is not supported on Internet Explorer 8 and earlier.
const copyBtn = document.getElementById("copyBtn");
const input = document.getElementById("input");
function copyText() {
const value = input.value;
input.select(); // selects the input variable as the text to be copied
input.setSelectionRange(0, 99999); // this is used to set the selection range for mobile devices
document.execCommand("copy"); // copies the selected text
alert("Copied the text " + value); // displays the copied text in a prompt
}
copyBtn.onmousedown = function () {
copyText();
}<input type="text" id="input" placeholder="Type text to copy... "/>
<button id="copyBtn">
Copy
</button>This was the only thing that worked for me:
let textarea = document.createElement('textarea');
textarea.setAttribute('type', 'hidden');
textarea.textContent = 'the string you want to copy';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
Update 2015: currently there's a way to use document.execCommand to work with the clipboard.
clipboard.js provides a cross-browser way to work with the clipboard (browser support).
To copy a selected text ('Text To Copy') to your clipboard, create a Bookmarklet (browser bookmark that executes JavaScript) and execute it (click on it). It will create a temporary textarea.
Code from GitHub:
https://gist.github.com/stefanmaric/2abf96c740191cda3bc7a8b0fc905a7d
(function (text) {
var node = document.createElement('textarea');
var selection = document.getSelection();
node.textContent = text;
document.body.appendChild(node);
selection.removeAllRanges();
node.select();
document.execCommand('copy');
selection.removeAllRanges();
document.body.removeChild(node);
})('Text To Copy');
Using the JavaScript feature using try/catch you can even have better error handling in doing so like this:
copyToClipboard() {
let el = document.getElementById('Test').innerText
el.focus(); // el.select();
try {
var successful = document.execCommand('copy');
if (successful) {
console.log('Copied Successfully! Do whatever you want next');
}
else {
throw ('Unable to copy');
}
}
catch (err) {
console.warn('Oops, Something went wrong ', err);
}
}
As of Flash 10, you can only copy to clipboard if the action originates from user interaction with a Flash object. (Read the related section from Adobe's Flash 10 announcement.)
The solution is to overlay a Flash object above the Copy button, or whatever element initiates the copy. ZeroClipboard is currently the best library with this implementation. Experienced Flash developers may just want to make their own library.
Update 2015: currently there's a way to use document.execCommand to work with the clipboard.
clipboard.js provides a cross-browser way to work with the clipboard (browser support).
There are many answers already, however like to add one (jQuery). Works great on any browser, also mobile ones (i.e., prompts about security, but when you accept it just works fine).
function appCopyToClipBoard(sText)
{
var oText = false,
bResult = false;
try
{
oText = document.createElement("textarea");
$(oText).addClass('clipboardCopier').val(sText).insertAfter('body').focus();
oText.select();
document.execCommand("Copy");
bResult = true;
}
catch(e) {
}
$(oText).remove();
return bResult;
}
In your code:
if (!appCopyToClipBoard('Hai there! This is copied to the clipboard.'))
{
alert('Sorry, copy to clipboard failed.');
}
I was going to use clipboard.js, but it doesn't have any mobile solution in place (yet) ... so I wrote a super small library:
This will either copy the text (desktop, Android, and Safari 10+), or at the very least, select the text (older versions of iOS). Minified it is just over 1 kB. In desktop Safari (before version 10) it tells the user to "Press Command + C to copy". You also don't need to write any JavaScript to use it.
The other methods will copy plain text to the clipboard. To copy HTML (i.e., you can paste results into a WYSIWYG editor), you can do the following in Internet Explorer only. This is is fundamentally different from the other methods, as the browser actually visibly selects the content.
// Create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
contentEditable = true;
}
editableDiv.appendChild(someContentElement);
// Select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();
r.execCommand("Copy");
// Deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();
Here is the simple Ajax/session based clipboard for the same website.
Note that the session must be enabled & valid and this solution works for the same site. I tested it on CodeIgniter, but I ran into session/Ajax problem, but this solved that problem too. If you don't want to play with sessions, use a database table.
JavaScript/jQuery
<script type="text/javascript">
$(document).ready(function() {
$("#copy_btn_id").click(function(){
$.post("<?php echo base_url();?>ajax/foo_copy/"+$(this).val(), null,
function(data){
// Copied successfully
}, "html"
);
});
$("#paste_btn_id").click(function() {
$.post("<?php echo base_url();?>ajax/foo_paste/", null,
function(data) {
$('#paste_btn_id').val(data);
}, "html"
);
});
});
</script>
HTML content
<input type='text' id='copy_btn_id' onclick='this.select();' value='myvalue' />
<input type='text' id='paste_btn_id' value='' />
PHP code
<?php
class Ajax extends CI_Controller {
public function foo_copy($val){
$this->session->set_userdata(array('clipboard_val' => $val));
}
public function foo_paste(){
echo $this->session->userdata('clipboard_val');
exit();
}
}
?>
I had to copy the non-input boxes text (text within any div/span tag) from the page and came up with following code. The only trick is to have a hidden field, but as type TEXT. It won't work with type hidden.
function copyToClipboard(sID) {
var aField = document.getElementById("hiddenField");
aField.hidden = false;
aField.value = document.getElementById(sID).textContent;
aField.select();
document.execCommand("copy");
alert("Following text has been copied to the clipboard.\n\n" + aField.value);
aField.hidden = true;
}
And in the HTML add the following:
input type="text" id="hiddenField" style="width:5px;border:0" />
...
From one of the projects I've been working on, a jQuery copy-to-clipboard plugin that utilizes the ZeroClipboard library.
It is easier to use than the native Zero Clipboard plugin if you're a heavy jQuery user.
For the security reason you can't do that. You must choose Flash for copying to the clipboard.
I suggest this one: http://zeroclipboard.org/
In addition to Dean Taylor's updated answer (July 2015), I wrote a jQuery method looking like his example.
/**
* Copies the current selected text to the SO clipboard
* This method must be called from an event to work with `execCommand()`
* @param {String} text Text to copy
* @param {Boolean} [fallback] Set to true shows a prompt
* @return Boolean Returns `true` if the text was copied or the user clicked on accept (in prompt), `false` otherwise
*/
var CopyToClipboard = function(text, fallback){
var fb = function () {
$t.remove();
if (fallback !== undefined && fallback) {
var fs = 'Please, copy the following text:';
if (window.prompt(fs, text) !== null) return true;
}
return false;
};
var $t = $('<textarea />');
$t.val(text).css({
width: '100px',
height: '40px'
}).appendTo('body');
$t.select();
try {
if (document.execCommand('copy')) {
$t.remove();
return true;
}
fb();
}
catch (e) {
fb();
}
};
Here is my take on that one...
function copy(text) {
var input = document.createElement('input');
input.setAttribute('value', text);
document.body.appendChild(input);
input.select();
var result = document.execCommand('copy');
document.body.removeChild(input);
return result;
}
@korayem: Note that using html input field won't respect line breaks \n and will flatten any text into a single line.
As mentioned by @nikksan in the comments, using textarea will fix the problem as follows:
function copy(text) {
var input = document.createElement('textarea');
input.innerHTML = text;
document.body.appendChild(input);
input.select();
var result = document.execCommand('copy');
document.body.removeChild(input);
return result;
}
The following approach works in Chrome, Firefox, Internet Explorer and Edge, and in recent versions of Safari (copy support was added in version 10 which was released Oct 2016).
Note: you will not see the textarea, as it is added and removed within the same synchronous invocation of Javascript code.
Some things to watch out for if you are implementing this yourself:
The function below should handle all of the following issues as cleanly as possible. Please leave a comment if you find any problems or have any suggestions for improving it.
// Copies a string to the clipboard. Must be called from within an
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+,
// Firefox 42+, Safari 10+, Edge and Internet Explorer 10+.
// Internet Explorer: The clipboard feature may be disabled by
// an administrator. By default a prompt is shown the first
// time the clipboard is used (per session).
function copyToClipboard(text) {
if (window.clipboardData && window.clipboardData.setData) {
// Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
return clipboardData.setData("Text", text);
}
else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
var textarea = document.createElement("textarea");
textarea.textContent = text;
textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in Microsoft Edge.
document.body.appendChild(textarea);
textarea.select();
try {
return document.execCommand("copy"); // Security exception may be thrown by some browsers.
}
catch (ex) {
console.warn("Copy to clipboard failed.", ex);
return false;
}
finally {
document.body.removeChild(textarea);
}
}
}
It seems I misread the question, but for reference, you can extract a range of the DOM (not to the clipboard; compatible with all modern browsers), and combine it with the oncopy, onpaste, and onbeforepaste events to get the clipboard behaviour. Here's the code to achieve this:
function clipBoard(sCommand) {
var oRange = contentDocument.createRange();
oRange.setStart(startNode, startOffset);
oRange.setEnd(endNode, endOffset);
/* This is where the actual selection happens.
in the above, startNode and endNode are
DOM nodes defining the beginning and
end of the "selection" respectively.
startOffset and endOffset are constants
that are defined as follows:
END_TO_END: 2
END_TO_START: 3
NODE_AFTER: 1
NODE_BEFORE: 0
NODE_BEFORE_AND_AFTER: 2
NODE_INSIDE: 3
START_TO_END: 1
START_TO_START: 0
And it would be used like oRange.START_TO_END
*/
switch(sCommand) {
case "cut":
this.oFragment = oRange.extractContents();
oRange.collapse();
break;
case "copy":
this.oFragment = oRange.cloneContents();
break;
case "paste":
oRange.deleteContents();
var cloneFragment = this.oFragment.cloneNode(true)
oRange.insertNode(cloneFragment);
oRange.collapse();
break;
}
}
Automatic copying to the clipboard may be dangerous, and therefore most browsers (except Internet Explorer) make it very difficult. Personally, I use the following simple trick:
function copyToClipboard(text) {
window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
The user is presented with the prompt box, where the text to be copied is already selected. Now it's enough to press Ctrl + C and Enter (to close the box) -- and voila!
Now the clipboard copy operation is safe, because the user does it manually (but in a pretty straightforward way). Of course, it works in all browsers.
<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>
<script>
function copyToClipboard(text) {
window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
</script>I like this one:
<input onclick="this.select();" type='text' value='copy me' />
If a user doesn't know how to copy text in their OS, then it's likely they don't know how to paste either. So just have it automatically selected, leaving the rest to the user.
It looks like you took the code from Greasemonkey\JavaScript Copy to Clipboard button or the original source of this snippet...
This code was for Greasemonkey, hence the unsafeWindow. And I guess the syntax error in Internet Explorer comes from the const keyword which is specific to Firefox (replace it with var).
<!DOCTYPE html>_x000D_
_x000D_
<style>_x000D_
#t {_x000D_
width: 1px_x000D_
height: 1px_x000D_
border: none_x000D_
}_x000D_
#t:focus {_x000D_
outline: none_x000D_
}_x000D_
</style>_x000D_
_x000D_
<script>_x000D_
function copy(text) {_x000D_
var t = document.getElementById('t')_x000D_
t.innerHTML = text_x000D_
t.select()_x000D_
try {_x000D_
var successful = document.execCommand('copy')_x000D_
var msg = successful ? 'successfully' : 'unsuccessfully'_x000D_
console.log('text coppied ' + msg)_x000D_
} catch (err) {_x000D_
console.log('Unable to copy text')_x000D_
}_x000D_
t.innerHTML = ''_x000D_
}_x000D_
</script>_x000D_
_x000D_
<textarea id=t></textarea>_x000D_
_x000D_
<button onclick="copy('hello world')">_x000D_
Click me_x000D_
</button>I have put together the solution presented by @dean-taylor here along with some other select / unselect code from elsewhere into a jQuery plugin available on NPM:
https://www.npmjs.com/package/jquery.text-select
npm install --save jquery.text-select
<script>
$(document).ready(function(){
$("#selectMe").selectText(); // Hightlight / select the text
$("#selectMe").selectText(false); // Clear the selection
$("#copyMe").copyText(); // Copy text to clipboard
});
</script>
Futher info on methods / events can be found at the NPM registry page above.
Reading and modifying the clipboard from a webpage raises security and privacy concerns. However, in Internet Explorer, it is possible to do it. I found this example snippet:
<script type="text/javascript">_x000D_
function select_all(obj) {_x000D_
var text_val=eval(obj);_x000D_
text_val.focus();_x000D_
text_val.select();_x000D_
r = text_val.createTextRange();_x000D_
if (!r.execCommand) return; // feature detection_x000D_
r.execCommand('copy');_x000D_
}_x000D_
</script>_x000D_
<input value="http://www.sajithmr.com"_x000D_
onclick="select_all(this)" name="url" type="text" />In addition to Dean Taylor's updated answer (July 2015), I wrote a jQuery method looking like his example.
/**
* Copies the current selected text to the SO clipboard
* This method must be called from an event to work with `execCommand()`
* @param {String} text Text to copy
* @param {Boolean} [fallback] Set to true shows a prompt
* @return Boolean Returns `true` if the text was copied or the user clicked on accept (in prompt), `false` otherwise
*/
var CopyToClipboard = function(text, fallback){
var fb = function () {
$t.remove();
if (fallback !== undefined && fallback) {
var fs = 'Please, copy the following text:';
if (window.prompt(fs, text) !== null) return true;
}
return false;
};
var $t = $('<textarea />');
$t.val(text).css({
width: '100px',
height: '40px'
}).appendTo('body');
$t.select();
try {
if (document.execCommand('copy')) {
$t.remove();
return true;
}
fb();
}
catch (e) {
fb();
}
};
If the copied link has to be pasted on the same site, then a simple solution is to highlight the text before pressing the simple HTML copy button and then on pressing it, the text content is stored in a session. And wherever it is to be pasted, there is a paste button.
**I know, it's not a persistent and universal solution, but it's something :)
This is a bit of a combination between the other answers.
var copyToClipboard = function(textToCopy){
$("body")
.append($('<textarea name="fname" class="textToCopyInput"/>' )
.val(textToCopy))
.find(".textToCopyInput")
.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
alert('Text copied to clipboard!');
} catch (err) {
window.prompt("To copy the text to clipboard: Ctrl+C, Enter", textToCopy);
}
$(".textToCopyInput").remove();
}
It uses jQuery, but it doesn't have to of course. You can change that if you want. I just had jQuery to my disposal. You can also add some CSS to make sure the input doesn't show. For instance something like:
.textToCopyInput{opacity: 0; position: absolute;}
Or of course you could also do some inline styling
.append($('<textarea name="fname" style="opacity: 0; position: absolute;" class="textToCopyInput"/>' )
Here is my solution:
var codeElement =
document.getElementsByClassName("testelm") &&
document.getElementsByClassName("testelm").length ?
document.getElementsByClassName("testelm")[0] :
"";
if (codeElement != "") {
var e = document.createRange();
e.selectNodeContents(codeElement);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(e);
document.execCommand("Copy");
selection.removeAllRanges();
}
The following approach works in Chrome, Firefox, Internet Explorer and Edge, and in recent versions of Safari (copy support was added in version 10 which was released Oct 2016).
Note: you will not see the textarea, as it is added and removed within the same synchronous invocation of Javascript code.
Some things to watch out for if you are implementing this yourself:
The function below should handle all of the following issues as cleanly as possible. Please leave a comment if you find any problems or have any suggestions for improving it.
// Copies a string to the clipboard. Must be called from within an
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+,
// Firefox 42+, Safari 10+, Edge and Internet Explorer 10+.
// Internet Explorer: The clipboard feature may be disabled by
// an administrator. By default a prompt is shown the first
// time the clipboard is used (per session).
function copyToClipboard(text) {
if (window.clipboardData && window.clipboardData.setData) {
// Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
return clipboardData.setData("Text", text);
}
else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
var textarea = document.createElement("textarea");
textarea.textContent = text;
textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in Microsoft Edge.
document.body.appendChild(textarea);
textarea.select();
try {
return document.execCommand("copy"); // Security exception may be thrown by some browsers.
}
catch (ex) {
console.warn("Copy to clipboard failed.", ex);
return false;
}
finally {
document.body.removeChild(textarea);
}
}
}
I use this very successfully (without jQuery or any other framework).
function copyToClp(txt){
txt = document.createTextNode(txt);
var m = document;
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).
I found the following solution:
The on-key-down handler creates a "pre" tag. We set the content to copy to this tag, and then make a selection on this tag and return true in the handler. This calls the standard handler of Chrome and copies selected text.
And if you need it, you may set the timeout for a function for restoring the previous selection. My implementation on MooTools:
function EnybyClipboard() {
this.saveSelection = false;
this.callback = false;
this.pastedText = false;
this.restoreSelection = function() {
if (this.saveSelection) {
window.getSelection().removeAllRanges();
for (var i = 0; i < this.saveSelection.length; i++) {
window.getSelection().addRange(this.saveSelection[i]);
}
this.saveSelection = false;
}
};
this.copyText = function(text) {
var div = $('special_copy');
if (!div) {
div = new Element('pre', {
'id': 'special_copy',
'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
});
div.injectInside(document.body);
}
div.set('text', text);
if (document.createRange) {
var rng = document.createRange();
rng.selectNodeContents(div);
this.saveSelection = [];
var selection = window.getSelection();
for (var i = 0; i < selection.rangeCount; i++) {
this.saveSelection[i] = selection.getRangeAt(i);
}
window.getSelection().removeAllRanges();
window.getSelection().addRange(rng);
setTimeout(this.restoreSelection.bind(this), 100);
} else return alert('Copy did not work. :(');
};
this.getPastedText = function() {
if (!this.pastedText) alert('Nothing to paste. :(');
return this.pastedText;
};
this.pasteText = function(callback) {
var div = $('special_paste');
if (!div) {
div = new Element('textarea', {
'id': 'special_paste',
'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
});
div.injectInside(document.body);
div.addEvent('keyup', function() {
if (this.callback) {
this.pastedText = $('special_paste').get('value');
this.callback.call(null, this.pastedText);
this.callback = false;
this.pastedText = false;
setTimeout(this.restoreSelection.bind(this), 100);
}
}.bind(this));
}
div.set('value', '');
if (document.createRange) {
var rng = document.createRange();
rng.selectNodeContents(div);
this.saveSelection = [];
var selection = window.getSelection();
for (var i = 0; i < selection.rangeCount; i++) {
this.saveSelection[i] = selection.getRangeAt(i);
}
window.getSelection().removeAllRanges();
window.getSelection().addRange(rng);
div.focus();
this.callback = callback;
} else return alert('Failed to paste. :(');
};
}
Usage:
enyby_clip = new EnybyClipboard(); // Init
enyby_clip.copyText('some_text'); // Place this in the Ctrl+C handler and return true;
enyby_clip.pasteText(function callback(pasted_text) {
alert(pasted_text);
}); // Place this in Ctrl+V handler and return true;
On paste, it creates a textarea and works the same way.
PS: Maybe this solution can be used for creating a full cross-browser solution without Flash. It works in Firefox and Chrome.
This was the only thing I ever got working, after looking up various ways all around the Internet. This is a messy topic. There are lots of solutions posted around the world and most of them do not work. This worked for me:
NOTE: This code will only work when executed as direct synchronous code to something like an 'onClick' method. If you call in an asynchronous response to Ajax or in any other asynchronous way it will not work.
copyToClipboard(text) {
var copyText = document.createElement("input");
copyText.type = "text";
document.body.appendChild(copyText);
copyText.style = "display: inline; width: 1px;";
copyText.value = text;
copyText.focus();
document.execCommand("SelectAll");
document.execCommand("Copy");
copyText.remove();
}
I do realize this code will show a 1-pixel wide component visibly on the screen for a millisecond, but decided not to worry about that, which is something that others can address if a real problem.
This is the best. So much winning.
var toClipboard = function(text) {
var doc = document;
// Create temporary element
var textarea = doc.createElement('textarea');
textarea.style.position = 'absolute';
textarea.style.opacity = '0';
textarea.textContent = text;
doc.body.appendChild(textarea);
textarea.focus();
textarea.setSelectionRange(0, textarea.value.length);
// Copy the selection
var success;
try {
success = doc.execCommand("copy");
}
catch(e) {
success = false;
}
textarea.remove();
return success;
}
After searching a solution that supports Safari and other browsers (Internet Explorer 9 and later),
I use the same as GitHub: ZeroClipboard
http://zeroclipboard.org/index-v1.x.html
HTML
<html>
<body>
<button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
<script src="ZeroClipboard.js"></script>
<script src="main.js"></script>
</body>
</html>
JavaScript
var client = new ZeroClipboard(document.getElementById("copy-button"));
client.on("ready", function (readyEvent) {
// alert( "ZeroClipboard SWF is ready!" );
client.on("aftercopy", function (event) {
// `this` === `client`
// `event.target` === the element that was clicked
event.target.style.display = "none";
alert("Copied text to clipboard: " + event.data["text/plain"]);
});
});
Here's an elegant solution for Angular 5.x+:
Component:
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Input,
OnInit,
Output,
Renderer2,
ViewChild
} from '@angular/core';
@Component({
selector: 'copy-to-clipboard',
templateUrl: './copy-to-clipboard.component.html',
styleUrls: ['./copy-to-clipboard.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CopyToClipboardComponent implements OnInit {
@ViewChild('input') input: ElementRef;
@Input() size = 'md';
@Input() theme = 'complement';
@Input() content: string;
@Output() copied: EventEmitter<string> = new EventEmitter<string>();
@Output() error: EventEmitter<string> = new EventEmitter<string>();
constructor(private renderer: Renderer2) {}
ngOnInit() {}
copyToClipboard() {
const rootElement = this.renderer.selectRootElement(this.input.nativeElement);
// iOS Safari blocks programmtic execCommand copying normally, without this hack.
// https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios
if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
this.renderer.setAttribute(this.input.nativeElement, 'contentEditable', 'true');
const range = document.createRange();
range.selectNodeContents(this.input.nativeElement);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
rootElement.setSelectionRange(0, 999999);
} else {
rootElement.select();
}
try {
document.execCommand('copy');
this.copied.emit();
} catch (err) {
this.error.emit(err);
}
};
}
Template:
<button class="btn btn-{{size}} btn-{{theme}}" type="button" (click)="copyToClipboard()">
<ng-content></ng-content>
</button>
<input #input class="hidden-input" [ngModel]="content">
Styles:
.hidden-input {
position: fixed;
top: 0;
left: 0;
width: 1px;
height: 1px;
padding: 0;
border: 0;
box-shadow: none;
outline: none;
background: transparent;
}
I compiled a few functions in a simple solution to cover all cases, with prompt fallback if needed.
window.copyToClipboard = function(text) {
// Internet Explorer specific
if (window.clipboardData && window.clipboardData.setData) {
return clipboardData.setData("Text", text);
}
// All other modern browsers
target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.textContent = text;
document.body.appendChild(target);
target.focus();
target.setSelectionRange(0, target.value.length);
// Copy the selection of fall back to prompt
try {
document.execCommand("copy");
target.remove();
console.log('Copied to clipboard: "'+text+'"');
}
catch(e) {
console.log("Can't copy string on this browser. Try to use Chrome, Firefox or Opera.")
window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
}
Test it here: https://jsfiddle.net/jv0avz65/
This is a standalone class and ensures no flashing could occur from the temporary textarea by placing it off-screen.
This works in Safari (desktop), Firefox, and Chrome.
// ================================================================================
// ClipboardClass
// ================================================================================
var ClipboardClass = (function() {
function copyText(text) {
// Create a temporary element off-screen to hold text.
var tempElem = $('<textarea style="position: absolute; top: -8888px; left: -8888px">');
$("body").append(tempElem);
tempElem.val(text).select();
document.execCommand("copy");
tempElem.remove();
}
// ============================================================================
// Class API
// ============================================================================
return {
copyText: copyText
};
})();
My bad. This only works in Internet Explorer.
Here's yet another way to copy text:
<p>
<a onclick="window.clipboardData.setData('text', document.getElementById('Test').innerText);">Copy</a>
</p>
I had to copy the non-input boxes text (text within any div/span tag) from the page and came up with following code. The only trick is to have a hidden field, but as type TEXT. It won't work with type hidden.
function copyToClipboard(sID) {
var aField = document.getElementById("hiddenField");
aField.hidden = false;
aField.value = document.getElementById(sID).textContent;
aField.select();
document.execCommand("copy");
alert("Following text has been copied to the clipboard.\n\n" + aField.value);
aField.hidden = true;
}
And in the HTML add the following:
input type="text" id="hiddenField" style="width:5px;border:0" />
...
This solution was found here. The document.execCommand("copy"); is not supported on Internet Explorer 8 and earlier.
const copyBtn = document.getElementById("copyBtn");
const input = document.getElementById("input");
function copyText() {
const value = input.value;
input.select(); // selects the input variable as the text to be copied
input.setSelectionRange(0, 99999); // this is used to set the selection range for mobile devices
document.execCommand("copy"); // copies the selected text
alert("Copied the text " + value); // displays the copied text in a prompt
}
copyBtn.onmousedown = function () {
copyText();
}<input type="text" id="input" placeholder="Type text to copy... "/>
<button id="copyBtn">
Copy
</button>The other methods will copy plain text to the clipboard. To copy HTML (i.e., you can paste results into a WYSIWYG editor), you can do the following in Internet Explorer only. This is is fundamentally different from the other methods, as the browser actually visibly selects the content.
// Create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
contentEditable = true;
}
editableDiv.appendChild(someContentElement);
// Select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();
r.execCommand("Copy");
// Deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();
This was the only thing I ever got working, after looking up various ways all around the Internet. This is a messy topic. There are lots of solutions posted around the world and most of them do not work. This worked for me:
NOTE: This code will only work when executed as direct synchronous code to something like an 'onClick' method. If you call in an asynchronous response to Ajax or in any other asynchronous way it will not work.
copyToClipboard(text) {
var copyText = document.createElement("input");
copyText.type = "text";
document.body.appendChild(copyText);
copyText.style = "display: inline; width: 1px;";
copyText.value = text;
copyText.focus();
document.execCommand("SelectAll");
document.execCommand("Copy");
copyText.remove();
}
I do realize this code will show a 1-pixel wide component visibly on the screen for a millisecond, but decided not to worry about that, which is something that others can address if a real problem.
Here is an easy example ;)
<!DOCTYPE html>
<html>
<body>
<input type="text"
value="Hello, World!"
id="myInput">
<button onclick="myFunction()">Copy text</button>
<p>The document.execCommand() method is not supported
in Internet Explorer 8 and earlier.</p>
<script>
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>
</body>
</html>
Since Chrome 42+ and Firefox 41+ now support the document.execCommand('copy') command, I created a couple of functions for a cross-browser copy-to-clipboard ability using a combination of Tim Down's old answer and Google Developer's answer:
function selectElementContents(el) {
// Copy textarea, pre, div, etc.
if (document.body.createTextRange) {
// Internet Explorer
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.select();
textRange.execCommand("Copy");
}
else if (window.getSelection && document.createRange) {
// Non-Internet Explorer
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy command was ' + msg);
}
catch (err) {
console.log('Oops, unable to copy');
}
}
} // end function selectElementContents(el)
function make_copy_button(el) {
var copy_btn = document.createElement('input');
copy_btn.type = "button";
el.parentNode.insertBefore(copy_btn, el.nextSibling);
copy_btn.onclick = function() {
selectElementContents(el);
};
if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {
// Copy works with Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+
copy_btn.value = "Copy to Clipboard";
}
else {
// Select only for Safari and older Chrome, Firefox and Opera
copy_btn.value = "Select All (then press Ctrl + C to Copy)";
}
}
/* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy,
but there was a bug in Chrome versions 42 to 47 that makes it return "false". So in those
versions of Chrome feature detection does not work!
See https://code.google.com/p/chromium/issues/detail?id=476508
*/
make_copy_button(document.getElementById("markup"));<pre id="markup">
Text that can be copied or selected with cross browser support.
</pre>In 2018, here's how you can go about it:
async copySomething(text?) {
try {
const toCopy = text || location.href;
await navigator.clipboard.writeText(toCopy);
console.log('Text or Page URL copied');
}
catch (err) {
console.error('Failed to copy: ', err);
}
}
It is used in my Angular 6+ code like so:
<button mat-menu-item (click)="copySomething()">
<span>Copy link</span>
</button>
If I pass in a string, it copies it. If nothing, it copies the page's URL.
More gymnastics to the clipboard stuff can be done too. See more information here:
document.querySelector('#some_your_textfield_id').select();
document.execCommand('copy');
The first line is to select the text that you want to copy.
The second line is to copy the selected text.
I had the same problem building a custom grid edit from (something like Excel) and compatibility with Excel. I had to support selecting multiple cells, copying and pasting.
Solution: create a textarea where you will be inserting data for the user to copy (for me when the user is selecting cells), set focus on it (for example, when user press Ctrl) and select the whole text.
So, when the user hit Ctrl + C he/she gets copied cells he/she selected. After testing just resizing the textarea to one pixel (I didn't test if it will be working on display:none). It works nicely on all browsers, and it is transparent to the user.
Pasting - you could do same like this (differs on your target) - keep focus on textarea and catch paste events using onpaste (in my project I use textareas in cells to edit).
I can't paste an example (commercial project), but you get the idea.
It looks like you took the code from Greasemonkey\JavaScript Copy to Clipboard button or the original source of this snippet...
This code was for Greasemonkey, hence the unsafeWindow. And I guess the syntax error in Internet Explorer comes from the const keyword which is specific to Firefox (replace it with var).
The below function can be used to copy into the clipboard:
copyToclipboard = (event, text) => {
var container = event.currentTarget;
let tempInnerHtml = container.innerHTML;
container.innerHTML = text;
window.getSelection().removeAllRanges();
let range = document.createRange();
range.selectNode(container);
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
container.innerHTML = tempInnerHtml;
}
From one of the projects I've been working on, a jQuery copy-to-clipboard plugin that utilizes the ZeroClipboard library.
It is easier to use than the native Zero Clipboard plugin if you're a heavy jQuery user.
I like this one:
<input onclick="this.select();" type='text' value='copy me' />
If a user doesn't know how to copy text in their OS, then it's likely they don't know how to paste either. So just have it automatically selected, leaving the rest to the user.
I've put together what I think is the best one.
Here it is:
const copyToClipboard = (function initClipboardText() {
const textarea = document.createElement('textarea');
// Move it off-screen.
textarea.style.cssText = 'position: absolute; left: -99999em';
// Set to readonly to prevent mobile devices opening a keyboard when
// text is .select()'ed.
textarea.setAttribute('readonly', true);
document.body.appendChild(textarea);
return function setClipboardText(text) {
textarea.value = text;
// Check if there is any content selected previously.
const selected = document.getSelection().rangeCount > 0 ?
document.getSelection().getRangeAt(0) : false;
// iOS Safari blocks programmatic execCommand copying normally, without this hack.
// https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios
if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
const editable = textarea.contentEditable;
textarea.contentEditable = true;
const range = document.createRange();
range.selectNodeContents(textarea);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
textarea.setSelectionRange(0, 999999);
textarea.contentEditable = editable;
}
else {
textarea.select();
}
try {
const result = document.execCommand('copy');
// Restore previous selection.
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
return result;
}
catch (err) {
console.error(err);
return false;
}
};
})();
Usage: copyToClipboard('some text')
In browsers other than Internet Explorer you need to use a small Flash object to manipulate the clipboard, e.g.
Simple, ready-to-use and not obsolete solution:
function copyToClipboard(elementIdToCopy, elementIdToNotifyOutcome) {
const contentToCopy = document.getElementById(elementIdToCopy).innerHTML;
const elementToNotifyOutcome = document.getElementById(elementIdToNotifyOutcome);
navigator.clipboard.writeText(contentToCopy).then(function() {
elementToNotifyOutcome.classList.add('success');
elementToNotifyOutcome.innerHTML = 'Copied!';
}, function() {
elementToNotifyOutcome.classList.add('failure');
elementToNotifyOutcome.innerHTML = 'Sorry, did not work.';
});
}
I have recently written a technical blog post on this very problem (I work at Lucidchart and we recently did an overhaul on our clipboard).
Copying plain text to the clipboard is relatively simple, assuming you attempt to do it during a system copy event (user presses Ctrl + C or uses the browser's menu).
var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 ||
navigator.userAgent.toLowerCase().indexOf("trident") != -1);
document.addEventListener('copy', function(e) {
var textToPutOnClipboard = "This is some text";
if (isIe) {
window.clipboardData.setData('Text', textToPutOnClipboard);
} else {
e.clipboardData.setData('text/plain', textToPutOnClipboard);
}
e.preventDefault();
});
Putting text on the clipboard not during a system copy event is much more difficult. It looks like some of these other answers reference ways to do it via Flash, which is the only cross-browser way to do it (so far as I understand).
Other than that, there are some options on a browser-by-browser basis.
This is the most simple in Internet Explorer, where you can access the clipboardData object at anytime from JavaScript via:
window.clipboardData
(When you attempt to do this outside of a system cut, copy, or paste event, however, Internet Explorer will prompt the user to grant the web application clipboard permission.)
In Chrome, you can create a Chrome extension that will give you clipboard permissions (this is what we do for Lucidchart). Then for users with your extension installed you'll just need to fire the system event yourself:
document.execCommand('copy');
It looks like Firefox has some options that allow users to grant permissions to certain sites to access the clipboard, but I haven't tried any of these personally.
There are three primary browser APIs for copying to the clipboard:
Async Clipboard API [navigator.clipboard.writeText]
document.execCommand('copy')
Overriding the copy event
Don't expect clipboard related commands to work whilst you are testing code in the console. Generally, the page is required to be active (Async Clipboard API) or requires user interaction (e.g. a user click) to allow (document.execCommand('copy')) to access the clipboard see below for more detail.
Note that since this post was originally written deprecation of permissions in cross-origin IFRAMEs and other IFRAME "sandboxing" prevents the embedded demos "Run code snippet" buttons and "codepen.io example" from working in some browsers (including Chrome and Microsoft Edge).
To develop create your own web page, serve that page over an HTTPS connection to test and develop against.
Here is a test/demo page which demonstrates the code working: https://deanmarktaylor.github.io/clipboard-test/
Due to the level of browser support for the new Async Clipboard API, you will likely want to fall back to the document.execCommand('copy') method to get good browser coverage.
Here is a simple example (may not work embedded in this site, read "important" note above):
function fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>(codepen.io example may not work, read "important" note above) Note that this snippet is not working well in Stack Overflow's embedded preview you can try it here: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors=1011
Note that there is an ability to "request permission" and test for access to the clipboard via the permissions API in Chrome 66.
var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
The rest of this post goes into the nuances and detail of the document.execCommand('copy') API.
The JavaScript document.execCommand('copy') support has grown, see the links below for browser updates:
(may not work embedded in this site, read "important" note above)
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.focus();
copyTextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});<p>
<button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
<textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>The above simple example works great if there is a textarea or input element visible on the screen.
In some cases, you might wish to copy text to the clipboard without displaying an input / textarea element. This is one example of a way to work around this (basically insert an element, copy to clipboard, remove element):
Tested with Google Chrome 44, Firefox 42.0a1, and Internet Explorer 11.0.8600.17814.
(may not work embedded in this site, read "important" note above)
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
//
// *** This styling is an extra step which is likely not required. ***
//
// Why is it here? To ensure:
// 1. the element is able to have focus and selection.
// 2. if the element was to flash render it has minimal visual impact.
// 3. less flakyness with selection and copying which **might** occur if
// the textarea element is not visible.
//
// The likelihood is the element won't even render, not even a
// flash, so some of these are just precautions. However in
// Internet Explorer the element is visible whilst the popup
// box asking the user for permission for the web page to
// copy to the clipboard.
//
// Place in the top-left corner of screen regardless of scroll position.
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
// Ensure it has a small width and height. Setting to 1px / 1em
// doesn't work as this gives a negative w/h on some browsers.
textArea.style.width = '2em';
textArea.style.height = '2em';
// We don't need padding, reducing the size if it does flash render.
textArea.style.padding = 0;
// Clean up any borders.
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
// Avoid flash of the white box if rendered for any reason.
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild(textArea);
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>All document.execCommand('copy') calls must take place as a direct result of a user action, e.g. click event handler. This is a measure to prevent messing with the user's clipboard when they don't expect it.
See the Google Developers post here for more info.
Note the full Clipboard API draft specification can be found here: https://w3c.github.io/clipboard-apis/
document.queryCommandSupported('copy') should return true if the command "is supported by the browser".document.queryCommandEnabled('copy') return true if the document.execCommand('copy') will succeed if called now. Checking to ensure the command was called from a user-initiated thread and other requirements are met.However, as an example of browser compatibility issues, Google Chrome from ~April to ~October 2015 only returned true from document.queryCommandSupported('copy') if the command was called from a user-initiated thread.
Note compatibility detail below.
Whilst a simple call to document.execCommand('copy') wrapped in a try/catch block called as a result of a user click will get you the most compatibility use the following has some provisos:
Any call to document.execCommand, document.queryCommandSupported or document.queryCommandEnabled should be wrapped in a try/catch block.
Different browser implementations and browser versions throw differing types of exceptions when called instead of returning false.
Different browser implementations are still in flux and the Clipboard API is still in draft, so remember to do your testing.
Copy text from HTML input to the clipboard:
function myFunction() {_x000D_
/* Get the text field */_x000D_
var copyText = document.getElementById("myInput");_x000D_
_x000D_
/* Select the text field */_x000D_
copyText.select();_x000D_
_x000D_
/* Copy the text inside the text field */_x000D_
document.execCommand("Copy");_x000D_
_x000D_
/* Alert the copied text */_x000D_
alert("Copied the text: " + copyText.value);_x000D_
} <!-- The text field -->_x000D_
<input type="text" value="Hello Friend" id="myInput">_x000D_
_x000D_
<!-- The button used to copy the text -->_x000D_
<button onclick="myFunction()">Copy text</button>Note: The document.execCommand() method is not supported in Internet Explorer 9 and earlier.
I use this very successfully (without jQuery or any other framework).
function copyToClp(txt){
txt = document.createTextNode(txt);
var m = document;
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).
This was the only thing that worked for me:
let textarea = document.createElement('textarea');
textarea.setAttribute('type', 'hidden');
textarea.textContent = 'the string you want to copy';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
I was going to use clipboard.js, but it doesn't have any mobile solution in place (yet) ... so I wrote a super small library:
This will either copy the text (desktop, Android, and Safari 10+), or at the very least, select the text (older versions of iOS). Minified it is just over 1 kB. In desktop Safari (before version 10) it tells the user to "Press Command + C to copy". You also don't need to write any JavaScript to use it.
$("td").click(function (e) {_x000D_
var clickedCell = $(e.target).closest("td");_x000D_
navigator.clipboard.writeText(clickedCell.text());_x000D_
alert(clickedCell.text());_x000D_
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<table>_x000D_
<tr>_x000D_
<td>First<td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Second<td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Third<td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Fourth<td>_x000D_
</tr>_x000D_
</table>I've read all the answers, as of June 1st, 2020, I've beeen struggling to solve this when I finally found documentation:
$("td").click(function (e) {
var clickedCell = $(e.target).closest("td");
navigator.clipboard.writeText(clickedCell.text());
});
It will write the clicked cell text to the browser clipboard.
You can change the selectors "td" for anything you want, you can add console.log for debugging and/or alert functions.
Here is documentation: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
Copy text from HTML input to the clipboard:
function myFunction() {_x000D_
/* Get the text field */_x000D_
var copyText = document.getElementById("myInput");_x000D_
_x000D_
/* Select the text field */_x000D_
copyText.select();_x000D_
_x000D_
/* Copy the text inside the text field */_x000D_
document.execCommand("Copy");_x000D_
_x000D_
/* Alert the copied text */_x000D_
alert("Copied the text: " + copyText.value);_x000D_
} <!-- The text field -->_x000D_
<input type="text" value="Hello Friend" id="myInput">_x000D_
_x000D_
<!-- The button used to copy the text -->_x000D_
<button onclick="myFunction()">Copy text</button>Note: The document.execCommand() method is not supported in Internet Explorer 9 and earlier.
I have recently written a technical blog post on this very problem (I work at Lucidchart and we recently did an overhaul on our clipboard).
Copying plain text to the clipboard is relatively simple, assuming you attempt to do it during a system copy event (user presses Ctrl + C or uses the browser's menu).
var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 ||
navigator.userAgent.toLowerCase().indexOf("trident") != -1);
document.addEventListener('copy', function(e) {
var textToPutOnClipboard = "This is some text";
if (isIe) {
window.clipboardData.setData('Text', textToPutOnClipboard);
} else {
e.clipboardData.setData('text/plain', textToPutOnClipboard);
}
e.preventDefault();
});
Putting text on the clipboard not during a system copy event is much more difficult. It looks like some of these other answers reference ways to do it via Flash, which is the only cross-browser way to do it (so far as I understand).
Other than that, there are some options on a browser-by-browser basis.
This is the most simple in Internet Explorer, where you can access the clipboardData object at anytime from JavaScript via:
window.clipboardData
(When you attempt to do this outside of a system cut, copy, or paste event, however, Internet Explorer will prompt the user to grant the web application clipboard permission.)
In Chrome, you can create a Chrome extension that will give you clipboard permissions (this is what we do for Lucidchart). Then for users with your extension installed you'll just need to fire the system event yourself:
document.execCommand('copy');
It looks like Firefox has some options that allow users to grant permissions to certain sites to access the clipboard, but I haven't tried any of these personally.
In Chrome you can use copy('the text or variable etc'). While this isn't cross-browser (and doesn't work in a snippet?), you could add it to the other cross-browser answers.
ZeroClipboard is the best cross-browser solution I've found:
<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>
<script src="ZeroClipboard.js"></script>
<script>
var clip = new ZeroClipboard( document.getElementById('copy') );
</script>
If you need non-Flash support for iOS you just add a fall-back:
clip.on( 'noflash', function ( client, args ) {
$("#copy").click(function(){
var txt = $(this).attr('data-clipboard-text');
prompt ("Copy link, then click OK.", txt);
});
});
For the security reason you can't do that. You must choose Flash for copying to the clipboard.
I suggest this one: http://zeroclipboard.org/
I had the same problem building a custom grid edit from (something like Excel) and compatibility with Excel. I had to support selecting multiple cells, copying and pasting.
Solution: create a textarea where you will be inserting data for the user to copy (for me when the user is selecting cells), set focus on it (for example, when user press Ctrl) and select the whole text.
So, when the user hit Ctrl + C he/she gets copied cells he/she selected. After testing just resizing the textarea to one pixel (I didn't test if it will be working on display:none). It works nicely on all browsers, and it is transparent to the user.
Pasting - you could do same like this (differs on your target) - keep focus on textarea and catch paste events using onpaste (in my project I use textareas in cells to edit).
I can't paste an example (commercial project), but you get the idea.
As far as I know that only works in Internet Explorer.
See also Dynamic Tools - JavaScript Copy To Clipboard, but it requires the user to change the configuration first and even then it doesn't seems to work.
There are three primary browser APIs for copying to the clipboard:
Async Clipboard API [navigator.clipboard.writeText]
document.execCommand('copy')
Overriding the copy event
Don't expect clipboard related commands to work whilst you are testing code in the console. Generally, the page is required to be active (Async Clipboard API) or requires user interaction (e.g. a user click) to allow (document.execCommand('copy')) to access the clipboard see below for more detail.
Note that since this post was originally written deprecation of permissions in cross-origin IFRAMEs and other IFRAME "sandboxing" prevents the embedded demos "Run code snippet" buttons and "codepen.io example" from working in some browsers (including Chrome and Microsoft Edge).
To develop create your own web page, serve that page over an HTTPS connection to test and develop against.
Here is a test/demo page which demonstrates the code working: https://deanmarktaylor.github.io/clipboard-test/
Due to the level of browser support for the new Async Clipboard API, you will likely want to fall back to the document.execCommand('copy') method to get good browser coverage.
Here is a simple example (may not work embedded in this site, read "important" note above):
function fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>(codepen.io example may not work, read "important" note above) Note that this snippet is not working well in Stack Overflow's embedded preview you can try it here: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors=1011
Note that there is an ability to "request permission" and test for access to the clipboard via the permissions API in Chrome 66.
var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
The rest of this post goes into the nuances and detail of the document.execCommand('copy') API.
The JavaScript document.execCommand('copy') support has grown, see the links below for browser updates:
(may not work embedded in this site, read "important" note above)
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.focus();
copyTextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});<p>
<button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
<textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>The above simple example works great if there is a textarea or input element visible on the screen.
In some cases, you might wish to copy text to the clipboard without displaying an input / textarea element. This is one example of a way to work around this (basically insert an element, copy to clipboard, remove element):
Tested with Google Chrome 44, Firefox 42.0a1, and Internet Explorer 11.0.8600.17814.
(may not work embedded in this site, read "important" note above)
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
//
// *** This styling is an extra step which is likely not required. ***
//
// Why is it here? To ensure:
// 1. the element is able to have focus and selection.
// 2. if the element was to flash render it has minimal visual impact.
// 3. less flakyness with selection and copying which **might** occur if
// the textarea element is not visible.
//
// The likelihood is the element won't even render, not even a
// flash, so some of these are just precautions. However in
// Internet Explorer the element is visible whilst the popup
// box asking the user for permission for the web page to
// copy to the clipboard.
//
// Place in the top-left corner of screen regardless of scroll position.
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
// Ensure it has a small width and height. Setting to 1px / 1em
// doesn't work as this gives a negative w/h on some browsers.
textArea.style.width = '2em';
textArea.style.height = '2em';
// We don't need padding, reducing the size if it does flash render.
textArea.style.padding = 0;
// Clean up any borders.
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
// Avoid flash of the white box if rendered for any reason.
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild(textArea);
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>All document.execCommand('copy') calls must take place as a direct result of a user action, e.g. click event handler. This is a measure to prevent messing with the user's clipboard when they don't expect it.
See the Google Developers post here for more info.
Note the full Clipboard API draft specification can be found here: https://w3c.github.io/clipboard-apis/
document.queryCommandSupported('copy') should return true if the command "is supported by the browser".document.queryCommandEnabled('copy') return true if the document.execCommand('copy') will succeed if called now. Checking to ensure the command was called from a user-initiated thread and other requirements are met.However, as an example of browser compatibility issues, Google Chrome from ~April to ~October 2015 only returned true from document.queryCommandSupported('copy') if the command was called from a user-initiated thread.
Note compatibility detail below.
Whilst a simple call to document.execCommand('copy') wrapped in a try/catch block called as a result of a user click will get you the most compatibility use the following has some provisos:
Any call to document.execCommand, document.queryCommandSupported or document.queryCommandEnabled should be wrapped in a try/catch block.
Different browser implementations and browser versions throw differing types of exceptions when called instead of returning false.
Different browser implementations are still in flux and the Clipboard API is still in draft, so remember to do your testing.
In case you're reading text from the clipboard in a Chrome extension, with 'clipboardRead' permission allowed, you can use the below code:
function readTextFromClipboardInChromeExtension() {
var ta = $('<textarea/>');
$('body').append(ta);
ta.focus();
document.execCommand('paste');
var text = ta.val();
ta.blur();
ta.remove();
return text;
}
function copytoclipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val('0' + element).select();
document.execCommand("copy");
$temp.remove();
}
It seems I misread the question, but for reference, you can extract a range of the DOM (not to the clipboard; compatible with all modern browsers), and combine it with the oncopy, onpaste, and onbeforepaste events to get the clipboard behaviour. Here's the code to achieve this:
function clipBoard(sCommand) {
var oRange = contentDocument.createRange();
oRange.setStart(startNode, startOffset);
oRange.setEnd(endNode, endOffset);
/* This is where the actual selection happens.
in the above, startNode and endNode are
DOM nodes defining the beginning and
end of the "selection" respectively.
startOffset and endOffset are constants
that are defined as follows:
END_TO_END: 2
END_TO_START: 3
NODE_AFTER: 1
NODE_BEFORE: 0
NODE_BEFORE_AND_AFTER: 2
NODE_INSIDE: 3
START_TO_END: 1
START_TO_START: 0
And it would be used like oRange.START_TO_END
*/
switch(sCommand) {
case "cut":
this.oFragment = oRange.extractContents();
oRange.collapse();
break;
case "copy":
this.oFragment = oRange.cloneContents();
break;
case "paste":
oRange.deleteContents();
var cloneFragment = this.oFragment.cloneNode(true)
oRange.insertNode(cloneFragment);
oRange.collapse();
break;
}
}
This can be done just by using a combination of getElementbyId, Select(), blur() and the copy command.
Note
The select() method selects all the text in a <textarea> element or an <input> element with a text field. This might not work on a button.
Usage
let copyText = document.getElementById('input-field');
copyText.select()
document.execCommand("copy");
copyReferal.blur()
document.getElementbyId('help-text').textContent = 'Copied'
The blur() method will remove the ugly highlighted portion instead of that you can show at beautiful message that your content was copied successfully.
Here is my solution:
var codeElement =
document.getElementsByClassName("testelm") &&
document.getElementsByClassName("testelm").length ?
document.getElementsByClassName("testelm")[0] :
"";
if (codeElement != "") {
var e = document.createRange();
e.selectNodeContents(codeElement);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(e);
document.execCommand("Copy");
selection.removeAllRanges();
}
document.querySelector('#some_your_textfield_id').select();
document.execCommand('copy');
The first line is to select the text that you want to copy.
The second line is to copy the selected text.
Since Chrome 42+ and Firefox 41+ now support the document.execCommand('copy') command, I created a couple of functions for a cross-browser copy-to-clipboard ability using a combination of Tim Down's old answer and Google Developer's answer:
function selectElementContents(el) {
// Copy textarea, pre, div, etc.
if (document.body.createTextRange) {
// Internet Explorer
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.select();
textRange.execCommand("Copy");
}
else if (window.getSelection && document.createRange) {
// Non-Internet Explorer
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy command was ' + msg);
}
catch (err) {
console.log('Oops, unable to copy');
}
}
} // end function selectElementContents(el)
function make_copy_button(el) {
var copy_btn = document.createElement('input');
copy_btn.type = "button";
el.parentNode.insertBefore(copy_btn, el.nextSibling);
copy_btn.onclick = function() {
selectElementContents(el);
};
if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {
// Copy works with Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+
copy_btn.value = "Copy to Clipboard";
}
else {
// Select only for Safari and older Chrome, Firefox and Opera
copy_btn.value = "Select All (then press Ctrl + C to Copy)";
}
}
/* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy,
but there was a bug in Chrome versions 42 to 47 that makes it return "false". So in those
versions of Chrome feature detection does not work!
See https://code.google.com/p/chromium/issues/detail?id=476508
*/
make_copy_button(document.getElementById("markup"));<pre id="markup">
Text that can be copied or selected with cross browser support.
</pre>In browsers other than Internet Explorer you need to use a small Flash object to manipulate the clipboard, e.g.
I have tried many solutions. If it works in modern browsers, it won't in Internet Explorer. If it works in Internet Explorer, it won't on iOS. I finally groomed them all and arrived at the below fix that works in all the browsers, iOS, webview, and Android.
Note: I also covered the scenario where the user denies permission to the clipboard. Additionally, the message "link copied" will be displayed even if the user copies manually.
<div class="form-group col-md-12">
<div class="input-group col-md-9">
<input name="copyurl"
type="text"
class="form-control br-0 no-focus"
id="invite-url"
placeholder="http://www.invitelink.com/example"
readonly>
<span class="input-group-addon" id="copy-link" title="Click here to copy the invite link">
<i class="fa fa-clone txt-18 text-success" aria-hidden="true"></i>
</span>
</div>
<span class="text-success copy-success hidden">Link copied.</span>
</div>
Script:
var addEvent = window.attachEvent || window.addEventListener;
var event = 'copy';
var $inviteUrl = $('#invite-url');
$('#copy-link').on('click', function(e) {
if ($inviteUrl.val()) {
if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
var el = $inviteUrl.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;
document.execCommand('copy');
$inviteUrl.blur();
}
else {
$inviteUrl.select();
document.execCommand("copy");
}
}
});
addEvent(event, function(event) {
if ($inviteUrl.val() && event.target.id == 'invite-url') {
var $copyLink = $('#copy-link i');
$copyLink.removeClass('fa-clone');
$copyLink.addClass('fa-check');
$('.copy-success').removeClass('hidden');
setTimeout(function() {
$copyLink.removeClass('fa-check');
$copyLink.addClass('fa-clone');
$('.copy-success').addClass('hidden');
}, 2000);
}
});
Reading and modifying the clipboard from a webpage raises security and privacy concerns. However, in Internet Explorer, it is possible to do it. I found this example snippet:
<script type="text/javascript">_x000D_
function select_all(obj) {_x000D_
var text_val=eval(obj);_x000D_
text_val.focus();_x000D_
text_val.select();_x000D_
r = text_val.createTextRange();_x000D_
if (!r.execCommand) return; // feature detection_x000D_
r.execCommand('copy');_x000D_
}_x000D_
</script>_x000D_
<input value="http://www.sajithmr.com"_x000D_
onclick="select_all(this)" name="url" type="text" />I found the following solution:
I have the text in a hidden input. Because setSelectionRange doesn't work on hidden inputs, I changed temporarily the type to text, copied the text, and then made it hidden again. If you want to copy the text from an element, you can pass it to the function and save its content in the target variable.
jQuery('#copy').on('click', function () {
copyToClipboard();
});
function copyToClipboard() {
var target = jQuery('#hidden_text');
// Make it visible, so can be focused
target.attr('type', 'text');
target.focus();
// Select all the text
target[0].setSelectionRange(0, target.val().length);
// Copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
}
catch (e) {
succeed = false;
}
// Hide input again
target.attr('type', 'hidden');
return succeed;
}
In browsers other than Internet Explorer you need to use a small Flash object to manipulate the clipboard, e.g.
Using document.execCommand will do the job for you...
Using that, you can also do cut, copy and paste...
This is one simple clipboard copy functionality which copies everything from input text...
function copyInputText() {_x000D_
var copyText = document.querySelector("#input");_x000D_
copyText.select();_x000D_
document.execCommand("copy");_x000D_
}_x000D_
_x000D_
document.querySelector("#copy").addEventListener("click", copyInputText);<input id="input" type="text" />_x000D_
<button id="copy">Copy</button>For more information, see Interact with the clipboard (add-on).
The below function can be used to copy into the clipboard:
copyToclipboard = (event, text) => {
var container = event.currentTarget;
let tempInnerHtml = container.innerHTML;
container.innerHTML = text;
window.getSelection().removeAllRanges();
let range = document.createRange();
range.selectNode(container);
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
container.innerHTML = tempInnerHtml;
}
I've put together what I think is the best one.
Here it is:
const copyToClipboard = (function initClipboardText() {
const textarea = document.createElement('textarea');
// Move it off-screen.
textarea.style.cssText = 'position: absolute; left: -99999em';
// Set to readonly to prevent mobile devices opening a keyboard when
// text is .select()'ed.
textarea.setAttribute('readonly', true);
document.body.appendChild(textarea);
return function setClipboardText(text) {
textarea.value = text;
// Check if there is any content selected previously.
const selected = document.getSelection().rangeCount > 0 ?
document.getSelection().getRangeAt(0) : false;
// iOS Safari blocks programmatic execCommand copying normally, without this hack.
// https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios
if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
const editable = textarea.contentEditable;
textarea.contentEditable = true;
const range = document.createRange();
range.selectNodeContents(textarea);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
textarea.setSelectionRange(0, 999999);
textarea.contentEditable = editable;
}
else {
textarea.select();
}
try {
const result = document.execCommand('copy');
// Restore previous selection.
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
return result;
}
catch (err) {
console.error(err);
return false;
}
};
})();
Usage: copyToClipboard('some text')
In Chrome you can use copy('the text or variable etc'). While this isn't cross-browser (and doesn't work in a snippet?), you could add it to the other cross-browser answers.
In browsers other than Internet Explorer you need to use a small Flash object to manipulate the clipboard, e.g.
Here's an elegant solution for Angular 5.x+:
Component:
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Input,
OnInit,
Output,
Renderer2,
ViewChild
} from '@angular/core';
@Component({
selector: 'copy-to-clipboard',
templateUrl: './copy-to-clipboard.component.html',
styleUrls: ['./copy-to-clipboard.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CopyToClipboardComponent implements OnInit {
@ViewChild('input') input: ElementRef;
@Input() size = 'md';
@Input() theme = 'complement';
@Input() content: string;
@Output() copied: EventEmitter<string> = new EventEmitter<string>();
@Output() error: EventEmitter<string> = new EventEmitter<string>();
constructor(private renderer: Renderer2) {}
ngOnInit() {}
copyToClipboard() {
const rootElement = this.renderer.selectRootElement(this.input.nativeElement);
// iOS Safari blocks programmtic execCommand copying normally, without this hack.
// https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios
if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
this.renderer.setAttribute(this.input.nativeElement, 'contentEditable', 'true');
const range = document.createRange();
range.selectNodeContents(this.input.nativeElement);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
rootElement.setSelectionRange(0, 999999);
} else {
rootElement.select();
}
try {
document.execCommand('copy');
this.copied.emit();
} catch (err) {
this.error.emit(err);
}
};
}
Template:
<button class="btn btn-{{size}} btn-{{theme}}" type="button" (click)="copyToClipboard()">
<ng-content></ng-content>
</button>
<input #input class="hidden-input" [ngModel]="content">
Styles:
.hidden-input {
position: fixed;
top: 0;
left: 0;
width: 1px;
height: 1px;
padding: 0;
border: 0;
box-shadow: none;
outline: none;
background: transparent;
}
Here is an easy example ;)
<!DOCTYPE html>
<html>
<body>
<input type="text"
value="Hello, World!"
id="myInput">
<button onclick="myFunction()">Copy text</button>
<p>The document.execCommand() method is not supported
in Internet Explorer 8 and earlier.</p>
<script>
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>
</body>
</html>
If you want a really simple solution (takes less than 5 minutes to integrate) and looks good right out of the box, then Clippy is a nice alternative to some of the more complex solutions.
It was written by a cofounder of GitHub. Example Flash embed code below:
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="110"
height="14"
id="clippy">
<param name="movie" value="/flash/clippy.swf"/>
<param name="allowScriptAccess" value="always"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param NAME="FlashVars" value="text=#{text}"/>
<param name="bgcolor" value="#{bgcolor}"/>
<embed
src="/flash/clippy.swf"
width="110"
height="14"
name="clippy"
quality="high"
allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
FlashVars="text=#{text}"
bgcolor="#{bgcolor}"/>
</object>
Remember to replace #{text} with the text you need copied, and #{bgcolor} with a color.
If the copied link has to be pasted on the same site, then a simple solution is to highlight the text before pressing the simple HTML copy button and then on pressing it, the text content is stored in a session. And wherever it is to be pasted, there is a paste button.
**I know, it's not a persistent and universal solution, but it's something :)
In case you're reading text from the clipboard in a Chrome extension, with 'clipboardRead' permission allowed, you can use the below code:
function readTextFromClipboardInChromeExtension() {
var ta = $('<textarea/>');
$('body').append(ta);
ta.focus();
document.execCommand('paste');
var text = ta.val();
ta.blur();
ta.remove();
return text;
}
Automatic copying to the clipboard may be dangerous, and therefore most browsers (except Internet Explorer) make it very difficult. Personally, I use the following simple trick:
function copyToClipboard(text) {
window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
The user is presented with the prompt box, where the text to be copied is already selected. Now it's enough to press Ctrl + C and Enter (to close the box) -- and voila!
Now the clipboard copy operation is safe, because the user does it manually (but in a pretty straightforward way). Of course, it works in all browsers.
<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>
<script>
function copyToClipboard(text) {
window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
</script>Reading and modifying the clipboard from a webpage raises security and privacy concerns. However, in Internet Explorer, it is possible to do it. I found this example snippet:
<script type="text/javascript">_x000D_
function select_all(obj) {_x000D_
var text_val=eval(obj);_x000D_
text_val.focus();_x000D_
text_val.select();_x000D_
r = text_val.createTextRange();_x000D_
if (!r.execCommand) return; // feature detection_x000D_
r.execCommand('copy');_x000D_
}_x000D_
</script>_x000D_
<input value="http://www.sajithmr.com"_x000D_
onclick="select_all(this)" name="url" type="text" />I compiled a few functions in a simple solution to cover all cases, with prompt fallback if needed.
window.copyToClipboard = function(text) {
// Internet Explorer specific
if (window.clipboardData && window.clipboardData.setData) {
return clipboardData.setData("Text", text);
}
// All other modern browsers
target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.textContent = text;
document.body.appendChild(target);
target.focus();
target.setSelectionRange(0, target.value.length);
// Copy the selection of fall back to prompt
try {
document.execCommand("copy");
target.remove();
console.log('Copied to clipboard: "'+text+'"');
}
catch(e) {
console.log("Can't copy string on this browser. Try to use Chrome, Firefox or Opera.")
window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
}
Test it here: https://jsfiddle.net/jv0avz65/
My bad. This only works in Internet Explorer.
Here's yet another way to copy text:
<p>
<a onclick="window.clipboardData.setData('text', document.getElementById('Test').innerText);">Copy</a>
</p>
Here is the simple Ajax/session based clipboard for the same website.
Note that the session must be enabled & valid and this solution works for the same site. I tested it on CodeIgniter, but I ran into session/Ajax problem, but this solved that problem too. If you don't want to play with sessions, use a database table.
JavaScript/jQuery
<script type="text/javascript">
$(document).ready(function() {
$("#copy_btn_id").click(function(){
$.post("<?php echo base_url();?>ajax/foo_copy/"+$(this).val(), null,
function(data){
// Copied successfully
}, "html"
);
});
$("#paste_btn_id").click(function() {
$.post("<?php echo base_url();?>ajax/foo_paste/", null,
function(data) {
$('#paste_btn_id').val(data);
}, "html"
);
});
});
</script>
HTML content
<input type='text' id='copy_btn_id' onclick='this.select();' value='myvalue' />
<input type='text' id='paste_btn_id' value='' />
PHP code
<?php
class Ajax extends CI_Controller {
public function foo_copy($val){
$this->session->set_userdata(array('clipboard_val' => $val));
}
public function foo_paste(){
echo $this->session->userdata('clipboard_val');
exit();
}
}
?>
As far as I know that only works in Internet Explorer.
See also Dynamic Tools - JavaScript Copy To Clipboard, but it requires the user to change the configuration first and even then it doesn't seems to work.
Reading and modifying the clipboard from a webpage raises security and privacy concerns. However, in Internet Explorer, it is possible to do it. I found this example snippet:
<script type="text/javascript">_x000D_
function select_all(obj) {_x000D_
var text_val=eval(obj);_x000D_
text_val.focus();_x000D_
text_val.select();_x000D_
r = text_val.createTextRange();_x000D_
if (!r.execCommand) return; // feature detection_x000D_
r.execCommand('copy');_x000D_
}_x000D_
</script>_x000D_
<input value="http://www.sajithmr.com"_x000D_
onclick="select_all(this)" name="url" type="text" />function copytoclipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val('0' + element).select();
document.execCommand("copy");
$temp.remove();
}
I have tried many solutions. If it works in modern browsers, it won't in Internet Explorer. If it works in Internet Explorer, it won't on iOS. I finally groomed them all and arrived at the below fix that works in all the browsers, iOS, webview, and Android.
Note: I also covered the scenario where the user denies permission to the clipboard. Additionally, the message "link copied" will be displayed even if the user copies manually.
<div class="form-group col-md-12">
<div class="input-group col-md-9">
<input name="copyurl"
type="text"
class="form-control br-0 no-focus"
id="invite-url"
placeholder="http://www.invitelink.com/example"
readonly>
<span class="input-group-addon" id="copy-link" title="Click here to copy the invite link">
<i class="fa fa-clone txt-18 text-success" aria-hidden="true"></i>
</span>
</div>
<span class="text-success copy-success hidden">Link copied.</span>
</div>
Script:
var addEvent = window.attachEvent || window.addEventListener;
var event = 'copy';
var $inviteUrl = $('#invite-url');
$('#copy-link').on('click', function(e) {
if ($inviteUrl.val()) {
if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
var el = $inviteUrl.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;
document.execCommand('copy');
$inviteUrl.blur();
}
else {
$inviteUrl.select();
document.execCommand("copy");
}
}
});
addEvent(event, function(event) {
if ($inviteUrl.val() && event.target.id == 'invite-url') {
var $copyLink = $('#copy-link i');
$copyLink.removeClass('fa-clone');
$copyLink.addClass('fa-check');
$('.copy-success').removeClass('hidden');
setTimeout(function() {
$copyLink.removeClass('fa-check');
$copyLink.addClass('fa-clone');
$('.copy-success').addClass('hidden');
}, 2000);
}
});
There are many answers already, however like to add one (jQuery). Works great on any browser, also mobile ones (i.e., prompts about security, but when you accept it just works fine).
function appCopyToClipBoard(sText)
{
var oText = false,
bResult = false;
try
{
oText = document.createElement("textarea");
$(oText).addClass('clipboardCopier').val(sText).insertAfter('body').focus();
oText.select();
document.execCommand("Copy");
bResult = true;
}
catch(e) {
}
$(oText).remove();
return bResult;
}
In your code:
if (!appCopyToClipBoard('Hai there! This is copied to the clipboard.'))
{
alert('Sorry, copy to clipboard failed.');
}
I have used clipboard.js.
We can get it on npm:
npm install clipboard --save
And also on Bower
bower install clipboard --save
Usage & examples are at https://zenorocha.github.io/clipboard.js/.
It looks like you took the code from Greasemonkey\JavaScript Copy to Clipboard button or the original source of this snippet...
This code was for Greasemonkey, hence the unsafeWindow. And I guess the syntax error in Internet Explorer comes from the const keyword which is specific to Firefox (replace it with var).
This is a bit of a combination between the other answers.
var copyToClipboard = function(textToCopy){
$("body")
.append($('<textarea name="fname" class="textToCopyInput"/>' )
.val(textToCopy))
.find(".textToCopyInput")
.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
alert('Text copied to clipboard!');
} catch (err) {
window.prompt("To copy the text to clipboard: Ctrl+C, Enter", textToCopy);
}
$(".textToCopyInput").remove();
}
It uses jQuery, but it doesn't have to of course. You can change that if you want. I just had jQuery to my disposal. You can also add some CSS to make sure the input doesn't show. For instance something like:
.textToCopyInput{opacity: 0; position: absolute;}
Or of course you could also do some inline styling
.append($('<textarea name="fname" style="opacity: 0; position: absolute;" class="textToCopyInput"/>' )
I have put together the solution presented by @dean-taylor here along with some other select / unselect code from elsewhere into a jQuery plugin available on NPM:
https://www.npmjs.com/package/jquery.text-select
npm install --save jquery.text-select
<script>
$(document).ready(function(){
$("#selectMe").selectText(); // Hightlight / select the text
$("#selectMe").selectText(false); // Clear the selection
$("#copyMe").copyText(); // Copy text to clipboard
});
</script>
Futher info on methods / events can be found at the NPM registry page above.
clipboard.js is a small, non-Flash, utility that allows copying of text or HTML data to the clipboard. It's very easy to use, just include the .js and use something like this:
<button id='markup-copy'>Copy Button</button>
<script>
document.getElementById('markup-copy').addEventListener('click', function() {
clipboard.copy({
'text/plain': 'Markup text. Paste me into a rich text editor.',
'text/html': '<i>here</i> is some <b>rich text</b>'
}).then(
function(){console.log('success'); },
function(err){console.log('failure', err);
});
});
</script>
clipboard.js is also on GitHub.
Note: This has been deprecated now. Migrate to here.
Here is my take on that one...
function copy(text) {
var input = document.createElement('input');
input.setAttribute('value', text);
document.body.appendChild(input);
input.select();
var result = document.execCommand('copy');
document.body.removeChild(input);
return result;
}
@korayem: Note that using html input field won't respect line breaks \n and will flatten any text into a single line.
As mentioned by @nikksan in the comments, using textarea will fix the problem as follows:
function copy(text) {
var input = document.createElement('textarea');
input.innerHTML = text;
document.body.appendChild(input);
input.select();
var result = document.execCommand('copy');
document.body.removeChild(input);
return result;
}
This is an expansion of Chase Seibert's answer, with the advantage that it will work for IMAGE and TABLE elements, not just DIVs on Internet Explorer 9.
if (document.createRange) {
// Internet Explorer 9 and modern browsers
var r = document.createRange();
r.setStartBefore(to_copy);
r.setEndAfter(to_copy);
r.selectNode(to_copy);
var sel = window.getSelection();
sel.addRange(r);
document.execCommand('Copy'); // Does nothing on Firefox
} else {
// Internet Explorer 8 and earlier. This stuff won't work
// on Internet Explorer 9.
// (unless forced into a backward compatibility mode,
// or selecting plain divs, not img or table).
var r = document.body.createTextRange();
r.moveToElementText(to_copy);
r.select()
r.execCommand('Copy');
}
Simple, ready-to-use and not obsolete solution:
function copyToClipboard(elementIdToCopy, elementIdToNotifyOutcome) {
const contentToCopy = document.getElementById(elementIdToCopy).innerHTML;
const elementToNotifyOutcome = document.getElementById(elementIdToNotifyOutcome);
navigator.clipboard.writeText(contentToCopy).then(function() {
elementToNotifyOutcome.classList.add('success');
elementToNotifyOutcome.innerHTML = 'Copied!';
}, function() {
elementToNotifyOutcome.classList.add('failure');
elementToNotifyOutcome.innerHTML = 'Sorry, did not work.';
});
}
In 2018, here's how you can go about it:
async copySomething(text?) {
try {
const toCopy = text || location.href;
await navigator.clipboard.writeText(toCopy);
console.log('Text or Page URL copied');
}
catch (err) {
console.error('Failed to copy: ', err);
}
}
It is used in my Angular 6+ code like so:
<button mat-menu-item (click)="copySomething()">
<span>Copy link</span>
</button>
If I pass in a string, it copies it. If nothing, it copies the page's URL.
More gymnastics to the clipboard stuff can be done too. See more information here:
Using document.execCommand will do the job for you...
Using that, you can also do cut, copy and paste...
This is one simple clipboard copy functionality which copies everything from input text...
function copyInputText() {_x000D_
var copyText = document.querySelector("#input");_x000D_
copyText.select();_x000D_
document.execCommand("copy");_x000D_
}_x000D_
_x000D_
document.querySelector("#copy").addEventListener("click", copyInputText);<input id="input" type="text" />_x000D_
<button id="copy">Copy</button>For more information, see Interact with the clipboard (add-on).
As of Flash 10, you can only copy to clipboard if the action originates from user interaction with a Flash object. (Read the related section from Adobe's Flash 10 announcement.)
The solution is to overlay a Flash object above the Copy button, or whatever element initiates the copy. ZeroClipboard is currently the best library with this implementation. Experienced Flash developers may just want to make their own library.
It looks like you took the code from Greasemonkey\JavaScript Copy to Clipboard button or the original source of this snippet...
This code was for Greasemonkey, hence the unsafeWindow. And I guess the syntax error in Internet Explorer comes from the const keyword which is specific to Firefox (replace it with var).
I found the following solution:
The on-key-down handler creates a "pre" tag. We set the content to copy to this tag, and then make a selection on this tag and return true in the handler. This calls the standard handler of Chrome and copies selected text.
And if you need it, you may set the timeout for a function for restoring the previous selection. My implementation on MooTools:
function EnybyClipboard() {
this.saveSelection = false;
this.callback = false;
this.pastedText = false;
this.restoreSelection = function() {
if (this.saveSelection) {
window.getSelection().removeAllRanges();
for (var i = 0; i < this.saveSelection.length; i++) {
window.getSelection().addRange(this.saveSelection[i]);
}
this.saveSelection = false;
}
};
this.copyText = function(text) {
var div = $('special_copy');
if (!div) {
div = new Element('pre', {
'id': 'special_copy',
'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
});
div.injectInside(document.body);
}
div.set('text', text);
if (document.createRange) {
var rng = document.createRange();
rng.selectNodeContents(div);
this.saveSelection = [];
var selection = window.getSelection();
for (var i = 0; i < selection.rangeCount; i++) {
this.saveSelection[i] = selection.getRangeAt(i);
}
window.getSelection().removeAllRanges();
window.getSelection().addRange(rng);
setTimeout(this.restoreSelection.bind(this), 100);
} else return alert('Copy did not work. :(');
};
this.getPastedText = function() {
if (!this.pastedText) alert('Nothing to paste. :(');
return this.pastedText;
};
this.pasteText = function(callback) {
var div = $('special_paste');
if (!div) {
div = new Element('textarea', {
'id': 'special_paste',
'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
});
div.injectInside(document.body);
div.addEvent('keyup', function() {
if (this.callback) {
this.pastedText = $('special_paste').get('value');
this.callback.call(null, this.pastedText);
this.callback = false;
this.pastedText = false;
setTimeout(this.restoreSelection.bind(this), 100);
}
}.bind(this));
}
div.set('value', '');
if (document.createRange) {
var rng = document.createRange();
rng.selectNodeContents(div);
this.saveSelection = [];
var selection = window.getSelection();
for (var i = 0; i < selection.rangeCount; i++) {
this.saveSelection[i] = selection.getRangeAt(i);
}
window.getSelection().removeAllRanges();
window.getSelection().addRange(rng);
div.focus();
this.callback = callback;
} else return alert('Failed to paste. :(');
};
}
Usage:
enyby_clip = new EnybyClipboard(); // Init
enyby_clip.copyText('some_text'); // Place this in the Ctrl+C handler and return true;
enyby_clip.pasteText(function callback(pasted_text) {
alert(pasted_text);
}); // Place this in Ctrl+V handler and return true;
On paste, it creates a textarea and works the same way.
PS: Maybe this solution can be used for creating a full cross-browser solution without Flash. It works in Firefox and Chrome.
This is an expansion of Chase Seibert's answer, with the advantage that it will work for IMAGE and TABLE elements, not just DIVs on Internet Explorer 9.
if (document.createRange) {
// Internet Explorer 9 and modern browsers
var r = document.createRange();
r.setStartBefore(to_copy);
r.setEndAfter(to_copy);
r.selectNode(to_copy);
var sel = window.getSelection();
sel.addRange(r);
document.execCommand('Copy'); // Does nothing on Firefox
} else {
// Internet Explorer 8 and earlier. This stuff won't work
// on Internet Explorer 9.
// (unless forced into a backward compatibility mode,
// or selecting plain divs, not img or table).
var r = document.body.createTextRange();
r.moveToElementText(to_copy);
r.select()
r.execCommand('Copy');
}
This is a standalone class and ensures no flashing could occur from the temporary textarea by placing it off-screen.
This works in Safari (desktop), Firefox, and Chrome.
// ================================================================================
// ClipboardClass
// ================================================================================
var ClipboardClass = (function() {
function copyText(text) {
// Create a temporary element off-screen to hold text.
var tempElem = $('<textarea style="position: absolute; top: -8888px; left: -8888px">');
$("body").append(tempElem);
tempElem.val(text).select();
document.execCommand("copy");
tempElem.remove();
}
// ============================================================================
// Class API
// ============================================================================
return {
copyText: copyText
};
})();
This can be done just by using a combination of getElementbyId, Select(), blur() and the copy command.
Note
The select() method selects all the text in a <textarea> element or an <input> element with a text field. This might not work on a button.
Usage
let copyText = document.getElementById('input-field');
copyText.select()
document.execCommand("copy");
copyReferal.blur()
document.getElementbyId('help-text').textContent = 'Copied'
The blur() method will remove the ugly highlighted portion instead of that you can show at beautiful message that your content was copied successfully.
This is the best. So much winning.
var toClipboard = function(text) {
var doc = document;
// Create temporary element
var textarea = doc.createElement('textarea');
textarea.style.position = 'absolute';
textarea.style.opacity = '0';
textarea.textContent = text;
doc.body.appendChild(textarea);
textarea.focus();
textarea.setSelectionRange(0, textarea.value.length);
// Copy the selection
var success;
try {
success = doc.execCommand("copy");
}
catch(e) {
success = false;
}
textarea.remove();
return success;
}
Using the JavaScript feature using try/catch you can even have better error handling in doing so like this:
copyToClipboard() {
let el = document.getElementById('Test').innerText
el.focus(); // el.select();
try {
var successful = document.execCommand('copy');
if (successful) {
console.log('Copied Successfully! Do whatever you want next');
}
else {
throw ('Unable to copy');
}
}
catch (err) {
console.warn('Oops, Something went wrong ', err);
}
}
I found the following solution:
I have the text in a hidden input. Because setSelectionRange doesn't work on hidden inputs, I changed temporarily the type to text, copied the text, and then made it hidden again. If you want to copy the text from an element, you can pass it to the function and save its content in the target variable.
jQuery('#copy').on('click', function () {
copyToClipboard();
});
function copyToClipboard() {
var target = jQuery('#hidden_text');
// Make it visible, so can be focused
target.attr('type', 'text');
target.focus();
// Select all the text
target[0].setSelectionRange(0, target.val().length);
// Copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
}
catch (e) {
succeed = false;
}
// Hide input again
target.attr('type', 'hidden');
return succeed;
}
<!DOCTYPE html>_x000D_
_x000D_
<style>_x000D_
#t {_x000D_
width: 1px_x000D_
height: 1px_x000D_
border: none_x000D_
}_x000D_
#t:focus {_x000D_
outline: none_x000D_
}_x000D_
</style>_x000D_
_x000D_
<script>_x000D_
function copy(text) {_x000D_
var t = document.getElementById('t')_x000D_
t.innerHTML = text_x000D_
t.select()_x000D_
try {_x000D_
var successful = document.execCommand('copy')_x000D_
var msg = successful ? 'successfully' : 'unsuccessfully'_x000D_
console.log('text coppied ' + msg)_x000D_
} catch (err) {_x000D_
console.log('Unable to copy text')_x000D_
}_x000D_
t.innerHTML = ''_x000D_
}_x000D_
</script>_x000D_
_x000D_
<textarea id=t></textarea>_x000D_
_x000D_
<button onclick="copy('hello world')">_x000D_
Click me_x000D_
</button>As far as I know that only works in Internet Explorer.
See also Dynamic Tools - JavaScript Copy To Clipboard, but it requires the user to change the configuration first and even then it doesn't seems to work.
To copy a selected text ('Text To Copy') to your clipboard, create a Bookmarklet (browser bookmark that executes JavaScript) and execute it (click on it). It will create a temporary textarea.
Code from GitHub:
https://gist.github.com/stefanmaric/2abf96c740191cda3bc7a8b0fc905a7d
(function (text) {
var node = document.createElement('textarea');
var selection = document.getSelection();
node.textContent = text;
document.body.appendChild(node);
selection.removeAllRanges();
node.select();
document.execCommand('copy');
selection.removeAllRanges();
document.body.removeChild(node);
})('Text To Copy');
I have used clipboard.js.
We can get it on npm:
npm install clipboard --save
And also on Bower
bower install clipboard --save
Usage & examples are at https://zenorocha.github.io/clipboard.js/.
$("td").click(function (e) {_x000D_
var clickedCell = $(e.target).closest("td");_x000D_
navigator.clipboard.writeText(clickedCell.text());_x000D_
alert(clickedCell.text());_x000D_
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<table>_x000D_
<tr>_x000D_
<td>First<td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Second<td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Third<td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Fourth<td>_x000D_
</tr>_x000D_
</table>I've read all the answers, as of June 1st, 2020, I've beeen struggling to solve this when I finally found documentation:
$("td").click(function (e) {
var clickedCell = $(e.target).closest("td");
navigator.clipboard.writeText(clickedCell.text());
});
It will write the clicked cell text to the browser clipboard.
You can change the selectors "td" for anything you want, you can add console.log for debugging and/or alert functions.
Here is documentation: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
ZeroClipboard is the best cross-browser solution I've found:
<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>
<script src="ZeroClipboard.js"></script>
<script>
var clip = new ZeroClipboard( document.getElementById('copy') );
</script>
If you need non-Flash support for iOS you just add a fall-back:
clip.on( 'noflash', function ( client, args ) {
$("#copy").click(function(){
var txt = $(this).attr('data-clipboard-text');
prompt ("Copy link, then click OK.", txt);
});
});
As far as I know that only works in Internet Explorer.
See also Dynamic Tools - JavaScript Copy To Clipboard, but it requires the user to change the configuration first and even then it doesn't seems to work.
Source: Stackoverflow.com