Copy to clipboard using JavaScript

Dan Fyfe

Creating an element that copies something to the user’s clipboard looks pretty impressive and can be equally convenient for the user. Let’s take a look!

In order to do this we need to use two tools that I had never seen before in my several months 😬 of coding experience: HTMLInputElement.select() and document.execCommand(‘copy’)

HTMLInputElement.select()

  • HTMLInputElement.select() does exactly what you would think: it selects something in an HTML input element. It is important to note that this only works with an HTML input element, such as a text area or an input that has a text field. The method literally selects the value of the input element it is called on, like any user would by double clicking or clicking and dragging to highlight a portion of text. We will be using it to select the value we want to copy.

document.execCommand(‘copy’)

  • You guessed it, it copies whatever is selected in the document. Neat!
  • Note that this is only guaranteed to work if used in an event listener or some kind of user action, which is just the way document.execCommand works.

Here’s what we will need: an HTML input element and a way to trigger the copy

  • HTML input element…
<input type='text' value='copy this!' id='copy-input'/>
  • Our trigger…
<button onClick="copyIt()">Copy that!</button>

For this example, I have a simple button that will trigger our copy when clicked. Our onClick event should look something like this…

function copyIt(){
// find the element we will select
let copyInput = document.querySelector('#copy-input')
// select that input
copyInput.select()
// copy it!
document.execCommand("copy")
}

Note that you may have to add the onClick event listener to your element in a different way depending on your setup.

dope!

It works!

Nice!

…we should be proud.

…yup.

…its ugly, though.

…not exactly what I wanted…

Sooooooo yea! This is a great example of how it works and a great way to see what is really happening (notice the text being highlighted as it is selected), but we can be slick about this, right? We can make it so we don’t see that input box. Our example is cool if you want the user to be able to copy whatever is in the input field after they have added something to it, but I don’t want to do that. I want to make something that copies a specific thing that the average user shouldn’t be able to change.

So how would we do that? The kicker is, it seems the input needs to be displayed to be selected, so we can’t just make it a hidden field and expect it to do anything. However, we CAN create a hidden field, then set the display to ‘block’, do our selecting and copying, then set the display back to ‘none’, which should work and not be noticeable cause computers are real fast.

Our copyIt function would then look like this…

function copyIt(){
// find the element we will select
let copyInput = document.querySelector('#copy-input')
// display the input
copyInput.style.display = 'block'
// select that input
copyInput.select()
// copy it!
document.execCommand("copy")
// hide the input
copyInput.style.display = 'none'
}
niiiiiiice

😎

That’s more like it!

This is the bare-bones, no real styling, ugly version, but hopefully this will be helpful for anyone in getting basic functionality. You could, of course, put the onClick listener on anything you wanted to create whatever wonderful, 5 star user experience you can think of.

Hope this was helpful!

Have fun!

sources:

Dan Fyfe

Written by

Dan Fyfe

Recent Flatiron School Web Development Grad

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade