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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

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:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint