Copy text to clipboard now that execCommand("copy") is obsolete

Question

I just saw on the Mozilla page that execCommand() is obsolete https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

"This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it."

This is what I currently use to copy text to the user's clipboard when the user clicks a "copy text" button. Is there another way to do it?

 var input = // input element with the text
 input.focus();
 input.setSelectionRange(0,99999);
 document.execCommand("copy");
 input.blur();

Edit: This How do I copy to the clipboard in JavaScript? does not answer the question. It suggests the same obsolete solution.

Does this answer your question? [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Klaycon, Feb 13 '20 at 22:14
The alternative is the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API), as stated on MDN: "This API is designed to supersede accessing the clipboard using `document.execCommand()`." However note that support for this API is not widespread yet, so as recommended in the linked dupe target, you'll probably end up falling back to `document.execCommand("copy");` anyway for wider browser coverage. — Klaycon, Feb 13 '20 at 22:15
Thanks. Sounds like they made the solution obsolete without having the replacement ready. — user984003, Feb 13 '20 at 22:25

user984003 · Accepted Answer · 2020-02-15T14:47:53.163

6

From Klaycon's comment to the question. The replacement is the Clipboard API. It is not implemented in all browsers, but most.

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

// In this example, the text to copy would be in an element with id = textcopy

var text_to_copy = document.getElementById("textcopy").innerHTML;

if (!navigator.clipboard){
    // use old commandExec() way
} else{
    navigator.clipboard.writeText(text_to_copy).then(
        function(){
            alert("yeah!"); // success 
        })
      .catch(
         function() {
            alert("err"); // error
      });
}

For some browsers (like Firefox) this only works when initiated by a user action. So, put the code inside a button listener, for example.

I tested this (Feb 2020) in (Windows) Chrome, Firefox, new Edge, Opera, iOS Safari, iOS Chrome, iOS app webview. Clipboard writeText works great.

edited Feb 15 '20 at 14:47

answered Feb 15 '20 at 13:35

user984003

23,717
51
158
250

1

Don't forget to check if the user gave permissions for this: `navigator.permissions.query({ name: 'clipboard-read' })` – Trisma Feb 15 '20 at 14:33
2

Permission is necessary to read from the clipboard and to write, but not to writeText. (Not sure what is the difference between write and writeText.) – user984003 Feb 15 '20 at 14:36
1

@user984003 The Clipboard interface's writeText() property writes the specified text string to the system clipboard. The Clipboard method write() writes arbitrary data, such as images, to the clipboard. This can be used to implement cut and copy functionality. – smolo Jun 16 '20 at 03:44

Copy text to clipboard now that execCommand("copy") is obsolete

1 Answers1