Copy Text to clipboard on Button Click in JavaScript

This article describes how you can use Javascript to Copy Text from the page’s Input Text or any Element on HTML Page.

While we were developing CodoBee Tools, we came across a requirement where we wanted to implement a feature where user can copy the portion of page without selecting and pressing Ctrl + C. We implemented one of these examples and we thought we should share the same here also.

This code describe how to allow user to Copy Text from HTML Element by a single click of an HTML Button.

Let’s see an example of Javascript function document.execCommand to copy selected text from input box.

Copy text from Input tag

<!-- The text field -->
<input type="text" value="David" id="firstname">

<!-- The button used to copy the text -->
<button onclick="CopyName()" id="btnCopy">Copy text</button>
function CopyName() {
  /* Pick input box firstname into fname from document*/
  var fname = document.getElementById("firstname");

  /* Select the inputbox */
  fname.select();
  fname.setSelectionRange(0, 99999); 

  /* execute copy command on document. */
  document.execCommand("copy");

  /* Change Text of Copy Button */
  var btn = document.getElementById("btnCopy");
        btn.innerText = "Copied";
}

The above example illustrates that you can run execcommand function to copy text which is selected. What if we want to copy content of <p> tag or any other tag where we do not have any input box.

Copy from any part of the page

In this case we have to take help from jquery. Lets include jquery in the page. Let’s see an example where we have some text in paragraph tag <p> and we have a button tag. We want to copy text from <p> by using jquery.

HTML Part

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p id="mainpg">This is content of Main Page</p>
<button onclick="CopyTextOfElement('#mainpg')">Copy TEXT</button>

Javascript Function

function CopyTextOfElement(pageElement) {
  /* Lets create an input tag in the text variable*/
  var $temp = $("<input>");
  
  /* append input tag at run time*/
  $("body").append($temp);
  
  /* Get Text value of pageElement into input tag's value */
  $temp.val($(pageElement).text()).select();
  
  /* Run document.execCommand to copy text into clipboard */
  document.execCommand("copy");
  
  /*Remove input tag from page.*/
  $temp.remove();
}

Now it looks very easy after seeing this example.

Follow 5 simple steps to get this done

  1. Create a virtual input tag in a variable
  2. Attach input tag on page
  3. Get value of specific element into input tag
  4. Run document.execCommand with “copy” parameter
  5. Remove virtual input tag from page.

You know why I love Javascript? Because there is no reason for not loving it.

Shhh…. Here is the secret.

I hope I was able to fulfil what I committed in the beginning.

Drop your thoughts in comment box so we will have more fun with Javascript functions.

One thought on “Copy Text to clipboard on Button Click in JavaScript

  • December 10, 2020 at 6:00 am
    Permalink

    I will right away clutch your rss as I can not in finding your email subscription hyperlink or newsletter service. June Alberto Fleeman

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *