WebReference.com - Chapter 6 of Beyond HTML Goodies, from Que Publishing (5/8)
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.
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 http://www.htmlgoodies.com/beyond/clipboard.html.
You can download just the examples at http://www.htmlgoodies.com/wpg/.
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,
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
Whatever is within the
SPAN commands is what will be copied. You'll also note that I popped in
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
holdtext" because it is there simply to hold the text while copying.
In case you're wondering, I tried the script by changing out
INPUT TYPE="hidden", but no dice. It really doesn't matter though because this works well.
FORM button. That doesn't matter. The button only triggers the function,
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
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 . . .
The function is named
ClipBoard(). It is triggered when the button is clicked. The text that
appears within (
Textarea box (
holdtext) is created by
taking the text from within (
Parameters are set around that text (
holdtext.createTextRange()), and the text is given a
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:
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
that includes the name of the function, the
ID of the
of the hidden
Textarea box, and the variable name you give in the script itself to represent
the text. I used "
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.
Created: August 9, 2002
Revised: August 9, 2002