Create a Copy Button with the JavaScript Clipboard API

A West Oakland California Poppy

I love this new feature popping around the internet—no more clicking and dragging to copy content from the web. Click a button, the data is magically on your clipboard, and you can paste it to your heart’s content. Best of all, this feature is supported by most modern browsers. So how do you implement it?

It’s simple:

• Create a button
• Set an onclick listener
• Use the Clipboard API in the event listener

Implementation

The HTML:

<button id='copy'>copy</button>
<textarea id='data'>un bel di vedremo</textarea>

The JavaScript:

const btn_copy = document.getElementById('copy')
const txt_data = document.getElementById('data')
copy.onclick = () => {
  const value = txt_data.value
  navigator.clipboard.writeText(value)
}

writeText returns a Promise that resolves when the data is copied to the clipboard successfully or rejects if the write fails. For this example, we ignore the Promise, but if you are copying large amounts of data into the clipboard, you should make the script wait for this write to resolve:

copy.onclick= async () => {
  const value = p_data.value
  await navigator.clipboard.writeText(value)
}

You can check out a live example here.

But how does it work?

The Clipboard API allows JavsScript access to the user’s clipboard. The clipboard is where all the data you copy, cut, and paste lives. Your system gives your browser access to this data, and in turn, the browser gives access to websites under certain conditions:

Read and write access to the clipboard must be triggered by the user through a user-driven event like a button click, shortcut keypress, etc. Websites can’t copy or paste without the user interacting with them.

The write permission is automatically granted to the website the user is currently on. Websites that are unfocused, other tabs, can’t randomly copy things into your clipboard.

The read permission needs to be requested by the website through the Permissions API. Websites can’t read what you have copied without asking you.

What about document.execCommand?

You can also use document.execCommand to read and write to the clipboard. However, it is being deprecated by FireFox and unlike the Clipboard API, it does not seem to have official web standard backing for this specific purpose. For the best browser support and forward compatibility, I would use the Clipboard API. Not to mention, the Clipboard API is easier, safer, and cleaner to use. Best of all the Clipboard API returns a Promise which is easier to handle and chain than the boolean execCommand returns.

Gotchas

When using writeText the data is automatically encoded as UTF-8, which should be fine for most use cases, but you can set the encoding manually using write([data]). Where data is a ClipboardItem instance. This item can have any text or data encoding. For example, if you only wanted to copy Chinese text for translation purposes: new ClipboardItem({'text/plain;charset=big5': text}).

You can’t access the Clipboard API without a user event. For example, if your website runs a job that generates long-form translations, you can’t write the data into the user’s clipboard at the end of that job. The user has to trigger an event, like a click, which grants you write access to the clipboard.

Sources:

JS Bin

Clipboard API and events

Clipboard.writeText()

Clipboard.write()

Clipboard API

Character Sets List

More content at plainenglish.io