November 25, 1999 - Highlighting Text Fields | WebReference

November 25, 1999 - Highlighting Text Fields

Yehuda Shiran November 25, 1999
Highlighting Text Fields
Tips: November 1999

Yehuda Shiran, Ph.D.
Doc JavaScript

Use the select() method to highlight the input area of a text field. You can use the select() method with the focus() method to highlight the field and position the cursor for a user response. This makes it easy for the user to replace all the text in the field.

<SCRIPT LANGUAGE="JavaScript">
<!--
function highlight(field) {
  field.focus();
  field.select();
}
// -->
</SCRIPT>
<FORM NAME="myForm">
<A HREF="javascript:highlight(document.myForm.myField)">Select All</A><BR>
<TEXTAREA NAME="myField" ROWS="5" COLS="40">Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7</TEXTAREA><BR>
<INPUT TYPE="button" VALUE="Select All" onClick="highlight(this.form.myField)">
</FORM>

Here's the actual output:

Select All

Our highlight() function receives a reference of a text field (<TEXTAREA> or <INPUT TYPE="text">) and invokes its focus() and select() methods. When calling the function from a button, we refer to the form as this.form because the button belongs to the same form as the text field. However, a link isn't a form element, so we must use absolute referencing (document.myForm or document.forms[0]).

Note that the select() method is supported by all versions of Navigator and Internet Explorer except Internet Explorer 3.0x.