[Contents] [Previous] [Next] [Index]

onBlur

Executes JavaScript code when a blur event occurs; that is, when a form element loses focus or when a window or frame loses focus.

Event handler for

Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, Window

Implemented in

Navigator 2.0
Navigator 3.0: event handler of
Button, Checkbox, FileUpload, Frame, Password, Radio, Reset, Submit, and Window

Syntax

onBlur="handlerText"

Parameters

handlerText
JavaScript code or a call to a JavaScript function.

Description

The blur event can result from a call to the Window.blur method or from the user clicking the mouse on another object or window or tabbing with the keyboard.

For windows, frames, and framesets, onBlur specifies JavaScript code to execute when a window loses focus.

A frame's onBlur event handler overrides an onBlur event handler in the BODY tag of the document loaded into frame.

Note In Navigator 3.0, on some platforms placing an onBlur event handler in a FRAMESET tag has no effect.

Event properties used

type
Indicates the type of event.

target
Indicates the object to which the event was originally sent.

Examples

Example 1: Validate form input. In the following example, userName is a required text field. When a user attempts to leave the field, the onBlur event handler calls the required function to confirm that userName has a legal value.

<INPUT TYPE="text" VALUE="" NAME="userName"
   onBlur="required(this.value)">
Example 2: Change the background color of a window. In the following example, a window's onBlur and onFocus event handlers change the window's background color depending on whether the window has focus.

<BODY BGCOLOR="lightgrey"
   onBlur="document.bgColor='lightgrey'"
   onFocus="document.bgColor='antiquewhite'">
Example 3: Change the background color of a frame. The following example creates four frames. The source for each frame, onblur2.html has the BODY tag with the onBlur and onFocus event handlers shown in Example 1. When the document loads, all frames are light grey. When the user clicks a frame, the onFocus event handler changes the frame's background color to antique white. The frame that loses focus is changed to light grey. Note that the onBlur and onFocus event handlers are within the BODY tag, not the FRAME tag.

<FRAMESET ROWS="50%,50%" COLS="40%,60%">
<FRAME SRC=onblur2.html NAME="frame1">
<FRAME SRC=onblur2.html NAME="frame2">
<FRAME SRC=onblur2.html NAME="frame3">
<FRAME SRC=onblur2.html NAME="frame4">
</FRAMESET>
The following code has the same effect as the previous code, but is implemented differently. The onFocus and onBlur event handlers are associated with the frame, not the document. The onBlur and onFocus event handlers for the frame are specified by setting the onblur and onfocus properties.

<SCRIPT>
function setUpHandlers() {
   for (var i = 0; i < frames.length; i++) {
      frames[i].onfocus=new Function("document.bgColor='antiquewhite'")
      frames[i].onblur=new Function("document.bgColor='lightgrey'")
   }
}
</SCRIPT>
<FRAMESET ROWS="50%,50%" COLS="40%,60%" onLoad=setUpHandlers()>
<FRAME SRC=onblur2.html NAME="frame1">
<FRAME SRC=onblur2.html NAME="frame2">
<FRAME SRC=onblur2.html NAME="frame3">
<FRAME SRC=onblur2.html NAME="frame4">
</FRAMESET>
Example 4: Close a window. In the following example, a window's onBlur event handler closes the window when the window loses focus.

<BODY onBlur="window.close()">
This is some text
</BODY>

See also

onChange, onFocus

For general information on event handlers, see "General Information about Events".

For information about the event object, see event.


[Contents] [Previous] [Next] [Index]

Last Updated: 10/31/97 16:34:02


Copyright � 1997 Netscape Communications Corporation