• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Actual Wizard

Actual Wizard

Great Content From Actual Wizards

  • Blogging
  • Programming
  • Social Media
  • Marketing
You are here: Home / Programming

How to Copy Text to the Clipboard with HTML and JavaScript

April 10, 2019 by Kevin Marszalek

Having a click-able button on your website that allows users to copy text can be easily achieved by using the document.execCommand() method.

Unfortunately support for the execCommand() method is lacking in many old browsers, such as Opera Mini and the UC Browser for Android.

The vast majority of users should be able to copy the text with out any issues and the website can display an error message if the copy command fails.

Additionally to work around browser support problem: As long as we put the text into a text box, it should be easy enough for users using these browsers to manually copy the text to the clipboard.

Copying Text From a Text Box to the Clipboard Using JavaScript

Demo:

HTML Code

<div>
     <input type="text" value="The Text to Copy" id="copyMe">
     <button onclick="copyMyText()">Copy To Clipboard</button>
</div>

JavaScript Code

<script>
function copyMyText() {
     //select the element with the id "copyMe", must be a text box
     var textToCopy = document.getElementById("copyMe");
     //select the text in the text box
     textToCopy.select();
     //copy the text to the clipboard
     document.execCommand("copy");
}
</script>

After pressing the button, you should be able to paste the text into the text field below or in any other application that will accept text being pasted from the clipboard.

Here is a box that you can paste the text into so you don’t have to leave this page:

Unfortunately, due to security concerns, it is not possible to paste text using JavaScript into a browser window through JavaScript, unless it’s a background page of a browser extension. This is to prevent websites from gathering sensitive information such as user passwords.

There is also one big issue with this code, if the user currently has text selected, they will lose their selection. In the following examples, the code will restore the user’s previous text selection if they had one.

How to Copy Any Text By Creating a Selection Range in JavaScript

Since selecting all of the text in a text box using select() will only work with a text box, if you want to copy all text to the clipboard of a specific ID or class name, you will have to create a text selection range instead.

This is a little bit more flexible as you do not have to have a text box.

Demo:

This is example text that will get copied to the clipboard when you press the button below.

HTML Code

<div class="CopyMeClass" id="CopyMeID">The text to copy to the clipboard.</div>
<div><button onclick="CopyClassText()">Copy The Text</button></div>

Javascript Code

<script>
function CopyClassText(){
     //select the element with ID = "CopyMeID", can be a div, p, or a span, possibly others
     var textToCopy = document.getElementById("CopyMeID");
 
     //you can target the same element using querySelector() as well
     //example below:
     //var textToCopy = document.querySelector('.CopyMeClass');
 
     //check and see if the user had a text selection range
     var currentRange;
     if(document.getSelection().rangeCount > 0)
     ;{
          //the user has a text selection range, store it
          currentRange = document.getSelection().getRangeAt(0);
          //remove the current selection
          window.getSelection().removeRange(currentRange);
     }
     else
     {
          //they didn't have anything selected
          currentRange = false;
     }
 
     //create a selection range
     var CopyRange = document.createRange();
     //choose the element we want to select the text of
     CopyRange.selectNode(textToCopy);
     //select the text inside the range
     window.getSelection().addRange(CopyRange);
     //copy the text to the clipboard
     document.execCommand("copy");
 
     //remove our selection range
     window.getSelection().removeRange(CopyRange);
 
     //return the old selection range
     if(currentRange)
     {
          window.getSelection().addRange(currentRange);
     }
}
</script>

How to Copy Text To the Clipboard that Isn’t Visible with HTML

This is probably the most useful version of the script as it allows you to generate text in JavaScript, which is not visible on the page at all, then place that text on to the clipboard.

It works by creating an element that is off the screen with the text that is to be copied.

Since browser compatibility could be an issue, the script will also display an error message in a message box if it can’t copy the text. Using a message box isn’t the best way to handle this but you can customize the code to display the error notification any way you choose.

Demo:

HTML Code

<p><button onclick="AdvancedCopy()">Copy Some Text That You Can't See!</button></p>

JavaScript Code

<script>
function AdvancedCopy(){
     //the text that is to be copied to the clipboard
     var theText = 'This is the text that we want to copy to the clipboard';
 
     //create our hidden div element
     var hiddenCopy = document.createElement('div');
     //set the innerHTML of the div
     hiddenCopy.innerHTML = theText;
     //set the position to be absolute and off the screen
     hiddenCopy.style.position = 'absolute';
     hiddenCopy.style.left = '-9999px';
 
     //check and see if the user had a text selection range
     var currentRange;
     if(document.getSelection().rangeCount > 0)
     {
          //the user has a text selection range, store it
          currentRange = document.getSelection().getRangeAt(0);
          //remove the current selection
          window.getSelection().removeRange(currentRange);
     }
     else
     {
          //they didn't have anything selected
          currentRange = false;
     }
 
     //append the div to the body
     document.body.appendChild(hiddenCopy);
     //create a selection range
     var CopyRange = document.createRange();
     //set the copy range to be the hidden div
     CopyRange.selectNode(hiddenCopy);
     //add the copy range
     window.getSelection().addRange(CopyRange);
 
     //since not all browsers support this, use a try block
     try
     {
          //copy the text
          document.execCommand('copy');
     }
     catch(err)
     {
          window.alert("Your Browser Doesn't support this! Error : " + err);
     }
     //remove the selection range (Chrome throws a warning if we don't.)
     window.getSelection().removeRange(CopyRange);
     //remove the hidden div
     document.body.removeChild(hiddenCopy);
 
     //return the old selection range
     if(currentRange)
     {
          window.getSelection().addRange(currentRange);
     }
}
</script>

I really hope that you enjoyed this tutorial!

Filed Under: Programming

Read More From Actual Wizard

  • Understanding the Different Parts of an Email Address
    An email address has four parts; the recipient name, the @ symbol, the domain name, and the top-level domain. …
  • How to Get the Last Element of an Array in JavaScript
    There are a number of different ways to get the last element of an array in JavaScript. Below we will explore …
  • How to use document.write() in JavaScript
    How to use document.write() in JavaScript The document.write() function is commonly used when testing simple …
  • How to Open a New Tab with JavaScript
    Opening a new browser window in a new tab can be done easily in JavaScript. Modern web browsers provide a …

Primary Sidebar

More posts from this section

  • How to Get the Last Element of an Array in JavaScript
  • How to use document.write() in JavaScript
  • How to Open a New Tab with JavaScript
  • PX to EM Converter – Online CSS Font Size Tool
  • How to Hide the URL Address in the Browser Status Bar
  • Heart Symbol HTML Code with Examples
  • HTML Trademark Symbol Code Example
  • Prevent a Phone Number from Wrapping to a New Line in CSS HTML
  • Html Tutorial Hello World Example with Code
  • Force a File to Download Instead of Opening it in a Browser with HTML

Copyright © 2025 ActualWizard.com

  • About
  • Terms of Service
  • Privacy Policy
  • Cookie Policy