August 10, 2000 - Implementing Read-Only Fields | WebReference

August 10, 2000 - Implementing Read-Only Fields

Yehuda Shiran August 10, 2000
Implementing Read-Only Fields
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

A blur event occurs when a text field loses focus. A field gains focus when the user clicks inside the text box, and the focus is lost when the user clicks outside the box, anywhere on the page. You can explicitly blur a text object using the object's blur() method, which removes focus from the field. This method deselects any text that might be selected in the field and removes the text insertion point from the field. At this point, no fields or form elements are focused. A manual way to blur a text object is to hit Tab, which advances focus to the next field in order and removes it from the current field (blurring it). However, the JavaScript blur() method only removes focus from its object, without giving focus to any other field in the form or in the page.

A read-only text field is a classic example for using the blur() method. The algorithm to create such a field is very simple. When the user explicitly gives focus to a field in order to write in it, an event handler (onFocus) invokes the blur() method to instantly remove the focus. Here is a read-only text field example:

Here is the script that implements the field entry:

<INPUT TYPE="text" NAME="myField" VALUE="Have you checked" onFocus="this.blur()" SIZE="40">