Learn Advanced JavaScript Programming

onFocus

A focus event occurs when a field receives input focus by tabbing on the keyboard or clicking with the mouse. The onFocus event handler obviously executes a prespecified code when a focus event occurs.

In addition, a focus event occurs in Microsoft Internet Explorer when the page loads. This behavior is unique to Microsoft’s browser (3.0 and up), but you have to take it into account if you are committed to support both browsers.

The following script scrolls a “T-banner” in a text object. It starts when the user clicks somewhere inside the text box (text object), triggering the onFocus event handler. Here is the script:

<HTML>
<HEAD>
<TITLE>T-Banner</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

// set speed of banner (pause in milliseconds between characters)
var speed = 100
// decrease value to increase speed (must be  positive)

// set pause between completion of message
// and beginning offollowing one
var pause = 1000 // increase value to increase pause

// set initial values
var timerID = null
var bannerRunning = false

// create global array
var ar = new Array()

// assign the strings to the array's elements
ar[0] = "Welcome to our JavaScript page"
ar[1] = "We hope you enjoy the T-Banner script"
ar[2] = "It is designed to be more stable than regular banners"
ar[3] = "Don't forget to check out our other scripts"
// set index of first message to be displayed first
var currentMessage = 0

// set index of last character to be displayed first
var offset = 0

// stop the banner if it is currently running
function stopBanner() {
 // if banner is currently running
 if (bannerRunning)
   // stop the banner
   clearTimeout(timerID)

 // timer is now stopped
 bannerRunning = false

}

// start the banner
function startBanner() {
 // make sure the banner is stopped
 stopBanner()

 // start the banner from the current position
 showBanner()

}

// type in the current message
function showBanner() {
 // assign current message to variable
 var text = ar[currentMessage]

 // if current message has not finished being displayed
 if (offset < text.length) {
// if last character of current message is a space
if (text.charAt(offset) == " ")
   // skip the current character
   offset++

   // assign the up-to-date to-be-displayed substring
   // second argument of method accepts index of last
  character plus one
   var partialMessage = text.substring(0, offset + 1)

   // display partial message in text field
   document.bannerForm.bannerField.value = partialMessage

   // increment index of last character to be displayed
   offset++
   // IE sometimes has trouble with  "++offset"

   // recursive call after specified time
   timerID = setTimeout("showBanner()", speed)

 // banner is running
 bannerRunning = true
   } else {
// reset offset
offset = 0

   // increment subscript (index) of current message
   currentMessage++

   // if subscript of current message is out of range
   if (currentMessage == ar.length)
// wrap around (start from beginning)
currentMessage = 0

   // recursive call after specified time
   timerID = setTimeout("showBanner()", pause)

 // banner is running
 bannerRunning = true
   }
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="bannerForm">
<INPUT TYPE="text" NAME="bannerField"
VALUE="Click here..." SIZE=50  
  onFocus="if (!bannerRunning) { startBanner() }">
</FORM>
</BODY>
</HTML>

Example 22-2. A T-banner starts in a text box when the user clicks in the box.

You can find a detailed explanation of this script in Chapter 18. Only new features will be covered here.

First of all, notice the form named bannerForm in the HTML body. The form consists of only one element, a text object. The name of this object is bannerField. Its size is set to 50 characters, and its default value is the string “Click here...”. The onFocus event handler is provided. When the user clicks inside the text box, a focus event occurs and startBanner() function is invoked to start the scrolling. Notice that this statement is executed only if the banner is not running. The variable bannerRunning holds the banner’s current state and is already true when the page loads.

The only difference between the original status-bar-based T-banner script in Chapter 18 and the text-box-based one in Example 22-2 is that the property window.status is replaced by document.bannerForm.bannerField.value, which is the reference to the text object’s content-reflecting property.

onSelect

A select event occurs when the user selects part of the text within a text field. The onSelect event handler enables you to respond to such an event.

Here is the general syntax for implementing this event handler:

<INPUT TYPE="text" VALUE=""
NAME="valueField" onSelect="selectState()">

Since the select event is rather rare and insignificant, this event handler is not commonly used. It was also broken in some versions of Navigator.

Methods

blur()

You already know what a blur event is. 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 pointer 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:

<INPUT TYPE="text" NAME="myField"
VALUE="" SIZE=15 onFocus="this.blur()">

You can consider the expression onFocus="this.blur()" an attribute of a read-only <INPUT TYPE="text"> element.

Table of Contents