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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Google Going Native With Chrome
Mozilla Fixes Firefox Flaws as 3.5 Release Nears
Microsoft and Novell Still Bosom Buddies

 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.

People who read this tip also read these tips:

Look for similar tips by subject:

webref The latest from WebReference.com Browse >
XML and PHP Simplified · Creating a ASP.NET Contact Form · Data Filtering with PHP
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters > 
 The latest from internet.com
Intel to Host Live Nehalem Q&A · 12 Tips to Troubleshoot Network File-Sharing · 10 Tips for Selling on Kijiji