Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
I have looked at many posts but could not find a clear current answer to the following two questions as it seems standards and browser support has been constantly changing.
Is it a legal operation according to the standard to change the clipboard with event.clipboardData.setData inside a 'copy' event handler?
Clipboard APIs were indeed in active development as of 2016, but things have stabilized since then:
Using event.clipboardData.setData() is supported
Changing the clipboard with
event.clipboardData.setData()
inside a
'copy'
event handler is allowed by the spec (as long as the event is not
synthetic
).
Note that you need to prevent the default action in the event handler to prevent your changes from being overwritten by the browser:
document.addEventListener('copy', function(e){
e.clipboardData.setData('text/plain', 'foo');
e.preventDefault(); // default behaviour is to copy any selected text
To trigger the copy event use execCommand
If you need to trigger the copy event (and not just handle the copy requests made by the user via the browser UI), you must use document.execCommand('copy'). It will only work in certain handlers, such as the click handler:
document.getElementById("copyBtn").onclick = function() {
document.execCommand('copy');
Modern browsers support both methods
Firefox supports both clipboardData in the copy/cut/paste events (since Firefox 22) and execCommand('copy') from user actions (since Firefox 41)
Chrome also supports both (the latter was added in Chrome 43 - or perhaps 42?)
caniuse.com claims that Safari 12 has complete support, versions up to 9.1 didn't support execCommand('copy').
MS Edge Platform Status lists IE/Edge as supporting the Clipboard APIs as of 2019, unlike when this answer was first written (2016).
https://github.com/garykac/clipboard/blob/master/clipboard.md has a compatibility table for execCommand(cut / copy / paste).
You can test this using the snippet below, please comment with the results.
More resources
Specification: Clipboard API and events
The Definitive Guide to Copying and Pasting in JavaScript (2014) - more information on clipboard API interoperability in browsers, including support for the "copy"/"paste" events without a selection and support for multiple formats.
Pages tagged "Clipboard API" on MDN
Testcase
window.onload = function() {
document.addEventListener('copy', function(e){
console.log("copy handler");
if (document.getElementById("enableHandler").checked) {
e.clipboardData.setData('text/plain', 'Current time is ' + new Date());
e.preventDefault(); // default behaviour is to copy any selected text
// This is just to simplify testing:
setTimeout(function() {
var tb = document.getElementById("target");
tb.value = "";
tb.focus();
}, 0);
document.getElementById("execCopy").onclick = function() {
document.execCommand('copy'); // only works in click handler or other user-triggered thread
document.getElementById("synthEvt").onclick = function() {
var e = new ClipboardEvent("copy", {dataType: "text/plain", data:"bar"});
document.dispatchEvent(e);
<input id="enableHandler" type="checkbox" checked>
<label for="enableHandler">Run clipboardData.setData('text/plain', ...) in the "copy" handler</label>
<p>Try selecting this text and triggering a copy using</p>
<li><button id="execCopy">document.execCommand('copy')</button> - should work.</li>
<li><button id="synthEvt">document.dispatchEvent(clipboardEvent)</button> - should NOT work</li>
<li>with keyboard shortcut - should work</li>
<li>or from the context menu - should work</li>
<p>If the "copy" handler was triggered, the focus will move to the textbox below automatically, so that you can try pasting from clipboard:</p>
<input type="text" id="target" size="80">
Async Clipboard API will provide a simpler way to manage the clipboard
When implemented, navigator.clipboard will let you write code like this:
navigator.clipboard.writeText('Text to be copied')
.then(() => {
console.log('Text copied to clipboard');
.catch(err => {
// This can happen if the user denies clipboard permissions:
console.error('Could not copy text: ', err);
Chrome 66 starts shipping a partial implementation, and they've published an article about the new API.
–
–
–
–
You can also just turn it into a function that calls its own handler and removes it
function copyStringToClipboard (string) {
function handler (event){
event.clipboardData.setData('text/plain', string);
event.preventDefault();
document.removeEventListener('copy', handler, true);
document.addEventListener('copy', handler, true);
document.execCommand('copy');
–
Bind the element id with copy event and then get the selected text. You could replace or modify the text. Get the clipboard and set the new text. To get the exact formatting you need to set the type as "text/hmtl". You may also bind it to the document instead of element.
$(ElementId).bind('copy', function(event) {
var selectedText = window.getSelection().toString();
selectedText = selectedText.replace(/\u200B/g, "");
clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
clipboardData.setData('text/html', selectedText);
event.preventDefault();
async copyClipboard(string){
await navigator.clipboard.writeText(string);
console.log("Text copied");
–
There are several answers here that reference execCommand(). This feature is deprecated.
For modern browser support its best to use writeText() which is part of the Clipboard interface.
A simple example would be:
navigator.clipboard.writeText(value)
.then(() => {
console.log(value + " copied to clipboard");
.catch(err => {
// This can happen if the user denies clipboard permissions:
console.error('Could not copy text: ', err);
–
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
