WebReference.com - Chapter 6 of Beyond HTML Goodies, from Que Publishing (5/8)

[previous] [next]

Beyond HTML Goodies, chapter 6

Copy to Clipboard

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. Figure 6.8 shows the foundation for this tutorial.

Example form. The text in the box will be copied when the button is clicked. Figure 6.8
This is the basic format you'll get with this tutorial. The text in the box will be copied when the button is clicked.

You can find this tutorial, and all of its examples, online at https://www.htmlgoodies.com/beyond/clipboard.html.

You can download just the examples at https://www.htmlgoodies.com/wpg/.

The Effect

Click the button below the shaded area and then paste it to a text editor. Ta da! That's a cool effect. If I had been able to do this from the beginning, I could have set up every tutorial 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

Let's start with the code that introduces what is to be copied. 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 that 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:

<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>

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 by 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", but 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. That doesn't matter. The button only triggers the function, ClipBoard().

The JavaScript

The script uses a lot of commands proprietary to Internet Explorer 4.0 and above. You'll want to be careful about changing any text you think might be a simple variable name. Except for the two names we assigned, holdtext and copytext, as well as 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. Let's take it from the top . . .

<SCRIPT LANGUAGE="JavaScript">
function ClipBoard() 
{
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}
</SCRIPT>

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 flags. If there is code, like a <BR> command created to display using & commands, those will copy right along. If you have formatting in the text and you only want the user to copy the text, 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 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".

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 her along in the process by doing at least the copy for her.