CodeBelly.com - JavaScript - Highlighting Form Text Areas on Mouse Click

CodeBelly.com
CodeBrain.NET

Home

Java Applets

Popup Maker

Top Picks

New Scripts

Java Scripts

Highlighting Form Text Areas on Mouse Click

Back to JavaScript Main Index

This simple script set shows how to highlight (select) the text in a form's textarea by clicking on a link. Useful for code listings, order form information, or other material the visitor may wish to copy to the clipboard with Control+C.

The code listing is its own example.
(See below.)
Clicking the 'here' link will select the text.
Clicking elsewhere will deselect the text.

Click here to select the code in the window below.
Use Ctrl+C to copy it to your clipboard.

==========================================
 HIGHLIGHTING FORM TEXTAREAS ON MOUSE CLICK
 ==========================================
  
 Copyright 2001 by www.CodeBelly.com
 Do *not* remove this notice.

=============
 INSTRUCTIONS:
 =============

Insert the scripts below in the page as noted. No changes
 are needed. Read through the General Rules for an under-
 standing of the requirements.
 
 For multiple instances, change the function name, the 
 form name, and the textarea name for each case.

General Rules:

1.
 The FORM must have a NAME="something" as shown in the
 HTML for the form (below, see NAME="TheForm").

2.
 The TEXTAREA must have a NAME="something" as shown in the
 HTML for the form (below, see NAME="TheText").

3.
 The names used in the form must agree with those used in
 the JavaScript script.  See:
   
     document.TheForm.TheText.focus();
     document.TheForm.TheText.select();

4.
 You can set the text to wrap by setting wrap="on" (or set
 it not to wrap with wrap="off") in the textarea tag.

============
 THE SCRIPTS:
 ============

Step One - The JavaScript Header Script
 ---------------------------------------

Put the following script in the head of the page.  The 
 form name and textarea name in the document reference
 in the script must conform to the names used in the 
 form in the body of the page.

Step Two - The Link That Selects The Text
 -----------------------------------------

Use the following code for a link which, when clicked,
 will select the text in the textarea.

<a href="javascript:selectText()">Click to Select</a>

Step Three - The Form and Its Textarea
 --------------------------------------

Put the following form in the <body> of the page where
 you wish the textarea to appear.  Alter the text as
 needed.  Remember that the form name and textarea name
 must agree in the form and in the script.

<form NAME="TheForm">
 <textarea rows="12" cols="62" NAME="TheText" wrap="off">
 This is the text in the textarea.  Change it to suit.
 </textarea>
 </form>