Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Cut and Copy Commands

IE10 and above added support for the 'cut' and 'copy' commands through the
Document.execCommand()
method. As of Chrome version 43, these commands are also supported in Chrome.

Any text selected in the browser when one of these commands is executed will be
cut or copied to the user's clipboard. This lets you offer the user a simple way
to select a portion of text and copy it to the clipboard.

This becomes extremely useful when you combine it with the Selection
API to
programmatically select text to determine what is copied to the clipboard, which
we'll be looking at in more detail later on in this article.

Simple Example

For example's sake, let's add a button which copies an email address to the
user's clipboard.

We add the email address in our HTML with a button to initiate the copying when it's clicked:

Then in our JavaScript, we want to add a click event handler to our button in
which we select the email address text from the js-emaillink anchor, execute a copy
command so that the email address is in the user's clipboard and then we
deselect the email address so the user doesn't see the selection occur.

What we are doing here is using a method of the Selection
API,
window.getSelection()
to programmatically set the 'selection' of text to the anchor, which is the text we
want to copy to the user's clipboard. After calling document.execCommand() we
can remove the selection by calling
window.getSelection().removeAllRanges().
If you wanted to confirm everything worked as expected you can examine the
response of document.execCommand(); it returns false if the command is not
supported or enabled. We wrap execCommand() in a try and catch since the 'cut'
and 'copy' commands can throw an
error
in a few scenarios.

The 'cut' command can be used for text fields where you want to remove the text
content and make it accessible via the clipboard.

queryCommandSupported and queryCommandEnabled

Ahead of calling document.execCommand(), you should ensure that this API is
supported using the
document.queryCommandSupported()
method. In our example above we could set the button disabled state based on
support like so:

copyEmailBtn.disabled = !document.queryCommandSupported('copy');

The difference between
document.queryCommandSupported()
and
document.queryCommandEnabled()
is that cut and copy could be supported by a browser, but if no text is currently selected, they won't be enabled. This is useful in scenarios where you aren't
setting the selection of text programmatically and want to ensure the command
will do as expected, otherwise present a message to the user.