How to copy to a user’s clipboard with only JavaScript

Put your learning hats on, we’re diving into another API that you might not have known existed before today! It will test your head… and your mind… and your brain, too. I need to be honest, this isn’t really one API. The clipboard API is made up of multiple API’s. But more than that, we’re going to need to pull in some more Web API’s that don’t directly relate to the clipboard and its utilities in order to completely take full advantage of the browser’s clipboard abilities. By the end you should have several new tools that make it easier to work with text on your websites and apps! Starting small: ClipboardEvent The clipboard event is the easiest to use, and is technically created through the , but here’s the dilemma: the clipboard API isn’t exposed in most web browsers. So you can only get to it through event handlers on the , , and events. real clipboard API copy cut paste This means you can modify what is happening during those events. Your code can change both what eventually ends up on the user’s clipboard, and what ends up showing on the screen. However, you can’t create your own event, . except in Firefox So.. What can we even do under these constraints? As it turns out, plenty! I can think of a few reasons to modify these events and I’ll give examples below. Add or remove something from a copied or cut text. Obtain the data that was pasted and use it elsewhere in your app. That’s not necessarily a , but with some extra API juice we can enhance our abilities. More on that later. lot Lets take a look at some examples. This won’t really stop people from copying your text, but it shows how it overrides the initial value. In the above example all you have to do is add an eventListener to the copy event. The event that you receive contains and its three methods: , , and . clipboardData setData getData clearData It actually has all methods and properties of the object. So you can inspect the properties, and in case you are not sure what arguments to use for or . DataTransfer items types setData getData Don’t let the user paste into the confirmation input, or don’t let them paste their own password. This example shows what it would look like to not allow a user to paste text into an input with the ID of “passwordConfirmation”. It also doesn’t allow them to paste “theUserPassword” into any field (we’re pretending that’s actually their password. Please ignore for a moment that you should never have the user’s password available in plain text in your web app.). Another example could be a profanity filter if you are creating a web app that expects young users. You could go on to use the value retrieved from elsewhere in your app. As an example, maybe you need to log when data is pasted, like in a test-taking app. Sometime’s pasting text in that setting could be OK, but you may want to be able to go back later and ensure the pasted content wasn’t copied from elsewhere. getData Creating your own copy event. Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework. — clipboardjs.com Before we get into this, I’d like to introduce you to an open source project that simplifies everything I’m about to show you. It’s called “clipboard.js” and it allows you to easily copy text to your clipboard. You may find it easier than doing this on your own. It’s quite a small library, and has a very simple API. _Copy text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to…_clipboardjs.com clipboard.js But we’re here to learn, so lets look at how you can copy text to the user’s clipboard using only Web APIs. Since the object isn’t exposed in most browsers, we must go a different route. To accomplish this we’ll need to add to our tools, . This will allow us to run a command that copies that current selection to the keyboard. ClipboardEvent document.execCommand() copy Here’s an example shown with CodePen: This must be triggered by a user event, like a click. This is a safety feature implemented on important operations, such as opening the file upload window, copying to a clipboard, etc. It helps to keep users safe from websites interacting with their computer when they don’t them want to. A few notes: You can use either an with the type attribute set to text, or a . With the latter requiring one less line of code in order to create it. input textarea You may read that requires , but as far as I can tell this is not true. It just needs to be triggered by a user initiated event. document.execCommand designmode You probably want to wrap in a try/catch block. In some browsers it will throw an error on failures. document.execCommand You can inspect the result of to see if it worked or not. It returns a Boolean that relates to the success of the command. execCommand And that’s it! You’re now successfully copying text to your clipboard! Please feel free to check out some of my other writings on APIs: , , and . Battery Console Video Also, please stay on the lookout for my upcoming post on the API and how it can be used with to do some really awesome stuff! DesignMode execCommand Hi, I’m Justin Fuller. I’m so glad you read my post! I need to let you know that everything I’ve written here is my own opinion and is not intended to represent my employer in way. All code samples are my own, and are completely unrelated to Bank Of America’s code. any I’d also love to hear from you, please feel free to connect with me on , , or . Thanks again for reading! LinkedIn Github Medium