Use JavaScript to copy to clipboard

In this post you’ll learn how to copy to the clipboard with document.execCommand.

document.execCommand runs commands, like cut and copy, that manipulate the current editable region, such as <input> elements.

You can copy currently selected text with the copy command:

document.execCommand('copy')

I’ll show you how to copy text from an input element, then I’ll show you how to copy arbitrary values.

Copying text from <input> elements

The easiest way to copy text is from a visible <input> element.

You can select text in an <input> element with the select method. For example, with the following HTML:

<input type="text" />

You could set the value of the element, select the text, and copy it with execCommand:

const input = document.querySelector('input')
input.value = 'Text to copy'
input.select()
document.execCommand('copy')

Copying a value

Rather than using an existing <input> element, you can use DOM APIs to select and copy an arbitrary value.

The steps to copy a value are:

1. Add an element to the document
2. Set the element textContent
3. Select the element
4. Call document.execCommand to copy the value.

You can select text in an element with the Range API and getSelection method.

The following code copies a value to the clipboard:

const el = document.createElement('span')

el.textContent = 'Text to copy'

// styles to prevent scrolling to the end of the page
el.style.position = 'fixed'
el.style.top = 0
el.style.clip = 'rect(0, 0, 0, 0)'

document.body.appendChild(el)

// select the element by creating a range
const range = document.createRange()
range.selectNode(el)
const selection = document.getSelection()
selection.addRange(range)

document.execCommand('copy')

Note: There are a few more styles you should set to make sure your code is bullet-proof. Take a look at the copy-to-clipboard source code, which I based the example code on.

Thanks for reading. If you have any questions, please leave a comment.