By Joe Burns

1. The copied text will appear inside MS Word Clipboard view panel as shown. Remember this will only hold up to 24 instances of text you have copied and will not be saved once you close MS Word. An OKAY method – Use Windows 10 built-in clipboard history feature.
2. How to pronounce copied in English. The definition of copied is: a reproduction of a written record (e.g. Of a legal or school.

...use these to jump around or read it all

An imitation, reproduction, or transcript of an original: a copy of a famous painting. One of the various examples or specimens of the same book, engraving, or the like. Matter intended to be reproduced in printed form. The text of a news story, advertisement, television commercial, or the like.

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:

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>
This text will be copied onto the clipboard when you click the button below. Try it!
</SPAN>

<TEXTAREA>
</TEXTAREA>
<BUTTON>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>

Copied Factory Ffxiv

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

Copied App

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!