JavaScript, how to copy DIV’s or SPAN’s content to clipboard

In one of my previous posts, I had a DIV that contains some codes, and I wanted to have this code to be able to be copied by someone onto a clipboard for better viewing. So, what I had was only a very simple javascript function for doing it. And note, it works on Internet Explorer only.

In JavaScript, only text within a textarea can be copied to clipboard. So, if you wanna copy the text or content within a DIV or SPAN, you have to transfer the content of the DIV and SPAN into a textarea. In our case, we make this textarea hidden, as you don’t wanna show this textarea as it serves NO purpose for any visual in our case. Its purpose is only to temporarily hold the text transferred from a DIV or SPAN, before copying to clipboard.

In our example, we have a DIV denoted by ID “mydiv”.

<div id=”mydiv”><b>There are some texts here which need to be copied to CLIPBOARD</b></div>



And we have a hidden textarea denoted by the ID “myhidta”.

<textarea style=”display:none;” id=”myhidta”></textarea>

And we have a few lines javascript that does the transfer of the text to the hidden textarea first and from that on it copies to CLIPBOARD.

function copy2cb()
{
  var ta= document.getElementById (“myhidta”);
  var d= document.getElementById (“mydiv”);
  // Transfer the text from the DIV to the hidden textarea
  ta.innerText= d.innerText;
  // create the text range
  var t= ta.createTextRange ();
  // do this if you wanna remove the format of the text within
  t.execCommand(‘RemoveFormat’);
  // Then execute the copy command
  t.execCommand(‘Copy’);
}

So, use a button place some where in your page (or preferably just below the DIV), to let the users click on the button, which then copies the text within the DIV onto CLIPBOARD, so users can then paste the text onto a notepad or other text editors.

<input type=button value=”Copy” onClick=”copy2cb();”/>

Please note this works only in Internet Explorer. In FireFox , you need to add an extra line of code, that is to set the “signed.applets.codebase_principal_support” variable of the FireFox’s config to true. The code below detects if a browser is Firefox, if so then does the setting to TRUE. Add the two lines below at the beginning of the copy2cb() function shown above.

// If it’s FireFox, then sets the

// “signed.applets.codebase_principal_support” to TRUE
if (navigator.userAgent.indexOf(“Firefox”)!=-1)
  user_pref(“signed.applets.codebase_principal_support”, true);



Or alternatively, you can set the Firefox browser to accept copying to clipboard, by changing the Firefox config manually. Just type “about:config” at the address bar of the Firefox, it will then present you with a screen for the confirmation if you wanna proceed for changing the config. Just click “I’ll be careful, I promise!”, then proceed, and you’ll be shown with a page full of the Firefox’ environment variables, then trace down according to the alphabetical order and locate where the variable “signed.applets.codebase_principal_support” is, double click on the line to set it to TRUE. (Double click again if you wanna reset it back to FALSE).

Enter your email address to subscribe our newsletter or feed for FREE:

Delivered by FeedBurner


Bookmark with:

[Delicious]    [Digg]    [Reddit]    [Facebook]    [StumbleUpon]

0 Responses to “JavaScript, how to copy DIV’s or SPAN’s content to clipboard”


  1. No Comments

Leave a Reply

You must login to post a comment.