Inside Technique : Simple Selection in Forms
By Scott Isaacs

Helping users with selection is an extremely simple but powerful way to spruce up your forms. In this article we created three functions for that help you better control your input fields.

Our first function is repeats functionality from an earlier article. We provide two demonstrations for quickly selecting all the text in a textbox using a simple selectText() function. The selectText() function takes an input text field and selects the contents:

function selectText(txtArea) {
	txtArea.focus()
	txtArea.select()
}

Below we demonstrate this function on both an HTML input box and textarea control:

A more interesting use of this function is to combine this functionality to auto-select the contents. The auto-selection only occurs when the default value of the field is present:

For this functionality we just added a small script to the input and text area's onfocus event:

<INPUT TYPE=text 
  VALUE="Enter your name" 
  NAME="txtDemo" 
  ONFOCUS="if (this.value==this.defaultValue) this.select()"> 

<TEXTAREA 
  ROWS=5 COLS=40 
  NAME="txtDemo" 
  ONFOCUS="if (this.value==this.defaultValue) this.select()">
Enter your address
</TEXTAREA>

Next we continue with adding better selection control to checkboxes and listboxes.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.