Drifting Designs Tutorials > > Coding > > JavaScript > > Highlight and Copy Textarea Content
Highlight and Copy Textarea Content
This tutorial will teach you how to use a code that allows users to highlight and copy the content in a textarea with only a click of the mouse! It's very useful in tutorials where often large amounts of text must be highlighted and copied from inside a textarea.
Below is an example of the highlight and copy design.
This tutorial may get a bit complicating, as it's pretty complex, so please bear with me. =)
Copy and paste the below code into the Head part of your webpage.
Now, place the below code in the Body section, where you want your textarea to be.
The below code is one that codes for a textarea. Note that it is named "select". You can manipulate the background color, size, font, etc. of the textarea, but don't change the name.
Replace "Content Here" with the content that should be in your textarea.
We're almost done now. =) Place the following code right below your textarea code.
You can change the style settings of the button. It's set to the code I use that blends in with my site background. You can change it to what you want it be - just don't change the "name="cpy" onclick="copyit('copy.select')"" part. =)
Then save your HTML Editor, open up your page, and test it out! I hope it works well for you. I had a lot of trouble with it at first, and it took me a looong time until I figured out how it works. Now I know it fairly well and absolutely love it! If you have trouble, go over the tutorial again, and make sure that everything you did was right.
Note: You can have this code show up more than once on a webpage. However, you must rename the form name. You can change it to "copy2" or "copy3" and so on, like I often do. Each form must have a unique form name, or none of the highlight-and-copy form codes on the page will work.
|
