JavaScript Copy Text to Clipboard Tutorial

For a very long time, web browsers did not allow JavaScript to copy text from web pages to user's clipboard and make it ready for paste, even with a user triggered action such as a click, due to some valid security concerns. What webmasters did instead was using third party software, libraries (e.g. Flash) or extensions, to do the job of copying text to the clipboard. This solution, though highly appreciated to have, required adding unnecessary resources to the page, hence increasing its size and load time, as well as introducing potential risks for different security threats.

From the user's side, saving important pages or text on a web page can be done by using the print screen button to save a screenshot of the web page or by bookmarking it but neither method can replace what a simple "click to copy" button can do for copying a certain piece of text from a web page.

For example, such a button is quite useful for copying a coupon or discount code on a deal website or for copying an answer on an answer site. It may also be useful on web applications with text editors, translation sites, password generators, online storage sites, website builders, writing related websites and so on.

Fortunately, modern web browsers such as Chrome, Firefox and others recently adapted a pure JavaScript method to enable running commands that can modify the content of a web page. The method I am talking about is the execCommand() method, which can manipulate the contents of a page with a number of actions including copy, cut, paste, bold, italic, delete, createLink, insertHTML, insertImage and many others.

How JavaScript execCommand() Works

The execCommand() method works on text that is located inside input fields such as input and textarea, and inside other HTML elements with the contenteditable attribute. Except for its selectAll command, all other commands that you can use with execCommand() method requires a selection of text or requires the cursor to be located in the editable element.

execCommand() is supported by Chrome 42+, Firefox 41+, Internet Explorer 9+ and Safari 10+. The clipboard capability of this method can be attached to JS events which can trigger a popup window such as a mouse click.

The following example will help you better understand how execCommand() works.

Copy Text to Clipboard with execCommand() Example

We first create an input field with some text in it.

<input type="text" id="text" value="Text to be copied.">

Next, we create a button which will function as a Copy button.

<input type="text" id="text" value="Text to be copied.">
<button type="button" id="copy">Copy</button>

In our JavaScript code, we will use the onclick event handler for the Copy button like the following:

document.getElementById("copy").onclick = function() {

}

When the click action takes place (i.e. the user clicks on the Copy button), the first step will be to select the text inside the input field.

document.getElementById("copy").onclick = function() {
  document.getElementById("text").select();
}

When the selection is ready, it is time to use the execCommand() method with the copy command as follows:

document.getElementById("copy").onclick = function() {
  document.getElementById("text").select();
  document.execCommand("copy");
}

You can see a demo of this below:

Copy

You can change the text in the input field as you wish. When you click the Copy button, you will notice that the text will be copied to the clipboard and you can then paste it to another application such as Word, Notepad or any other text editor. You can also style the Copy button using CSS the way you want. Just keep in mind that if you ever click a Copy button on any web page, the new copied content will override whatever content you have on the clipboard, so make sure your clipboard is free for use before copying anything on the web.

You should use the Copy to Clipboard feature only where you really need it and stay away bad web design practices if you want to provide your users with a pleasant browsing experience.

Other than copying text to clipboard, you can also create and download text files with JavaScript. Hopefully this and our other tutorials will help you while developing your website or web application.

f t g+ in