Click... It's Copied!

By Joe Burns

...use these to jump around or read it all
[The Text To Be Copied] [The JavaScript]
[What If There Is Code?] [Multiple Copies On One Page]

I've seen this effect used in a couple of places. It's a really neat look so I thought a tutorial would be in order. I grabbed some blips of code and played with it to set it up so that it's an easy grab from a tutorial. You can alter this and pretty it up to your heart's content. All I'm passing along here is the basic code and how it all works. OK? OK! Let's take a look at the effect:

This text will be copied onto the clipboard when you click the button below. Try it!

Click the button below the shaded area and then paste it to a text editor. Ta da! Cool effect. If I had been able to do this from the beginning, I could have set every tutorial up like this. Well, maybe I wouldn't have. This effect requires the use of a command available only in IE 4.0 or better,
"execCommand()".

It's an Internet Explorer-only statement that allows the browser to execute a command, thus the name. In this case, we're executing a copy. But you'll see the code for that later. Let's talk about what's happening with the visible items first.

I've got a shaded block with text sitting inside. The shading is only there for presentation purposes. It's to show that what is inside of the colored area is what will be copied to the clipboard.

You can't see it yet, but there is also a Textarea box that's hidden. When you click on the button, the program copies the text to the Textarea box and also to the clipboard. Let's take a look at the code that puts these elements to the page.


The Text To Be Copied

<SPAN ID="copytext" STYLE="height:150;width:162;background-color:pink">
This text will be copied onto the clipboard when you click the button below. Try it!
</SPAN>

<TEXTAREA ID="holdtext" STYLE="display:none;">
</TEXTAREA>
<BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON>

Follow this from the top. I have a SPAN surrounding text. That SPAN is given the ID "copytext". Whatever is within the SPAN commands is what will be copied. You'll also note I popped in an inline STYLE attribute in order to set the SPAN to a specific height, width, and background color. That's not required. I just did it for looks.

Next is a Textarea box that's been made invisible through an inline STYLE attribute. It has been given the ID, "holdtext" because it is there simply to hold the text while copying.

In case you're wondering, I tried the script changing out NAME for ID and the JavaScript wouldn't recognize it. I also tried numerous other hidden elements including the traditional INPUT TYPE="hidden". No dice. It really doesn't matter though because this works well.

Finally, a basic button is in place simply to trigger the JavaScript that performs the copy. Yes, you can go with the traditional FORM button equal. That doesn't matter. The button only triggers the function, "ClipBoard()".


The JavaScript

<SCRIPT LANGUAGE="JavaScript">

function ClipBoard()
{
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}

</SCRIPT>

The script uses a lot of commands proprietary to Internet Explorer 4.0 and above. You'll want to be careful changing out any text you think might be a simple variable name. Except for the two names we assigned, "holdtext" and "copytext", and "Copied" within the script itself, everything else carries with it actions past just a name. That's why the script is so functional yet is so small. From the top...

The function is named ClipBoard(). It is triggered when the button is clicked. The text that appears within (innerText) the TextArea box (holdtext) is created by taking the text from within (innerText) the SPAN (copytext).

Parameters are set around that text (holdtext.createTextRange()) and the text is given a name (Copied).

Next, the text (Copied) is copied to the clipboard using the IE execCommand to copy.

That's about it in a nutshell.


What If There Is Code?

The script, as it is currently written, copies whatever text is within the SPAN tags. If there is code, like a <BR> command created to display using & commands, those will copy right along. If you've got formatting in the text and you only want the user to copy the text, then you need to add a command that will remove that formatting. Luckily, there's an execCommand that will do that for you. It's important that you place it in the script before the copy process.

The script will look like this:

<SCRIPT LANGUAGE="JavaScript">

function ClipBoard()
{
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("RemoveFormat");
Copied.execCommand("Copy");
}

</SCRIPT>

I made the new line bold so it would stick out a little more. That line will remove any formatting associated with the copied code so just the text will copy.


Multiple Copies On One Page

As with any time a JavaScript sits on a page, if you post multiples of that JavaScript, you need to make a point of changing out the variables that attach the visible elements with the JavaScript. In this case that includes the name of the function, the ID of the SPAN, the ID of the hidden Textarea box, and the variable name you give in the script itself to represent the text. I used "Copied".


That's That

This is a great effect and it will work with voluminous amounts of text or just a few words. This script goes to the concept of interacting with the user. Instead of asking the user to copy and paste, now you can help then along in the process by doing at least the copy for them.

Enjoy!

[The Text To Be Copied] [The JavaScript]
[What If There Is Code?] [Multiple Copies On One Page]


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •