Fires when the object loses the input focus.
| Inline |
<element onblur = "handler" ... > |
| Script |
object.onblur = handler |
| Bubbles |
No |
| Cancels |
No |
| To invoke |
Cause an object to lose focus.
- Click the mouse on the document background or another control.
- Use the keyboard to navigate from one object to the next.
- Invoke the blur method when an object has focus.
- Switch focus to a different application or open a second browser window.
|
| Default action |
Switches focus away from the object on which the event is fired. |
The onblur event occurs when an element loses focus either via the pointing device or by tabbing navigation.
This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON, as well as the window object.
In addition, most current browsers support the event in any element that can receive the focus, such as links in anchors and area elements.
The onblur event fires on the original object before the onfocus or onclick event fires on the object that is receiving focus. Where applicable, the onblur event fires after the onchange event.
The focus events are useful for determining when to prepare an object to receive or validate input from the user.
While event handlers in the Document Object Model do not receive parameters directly, the handler can query the event object for data.
Event Object Properties
| clientX |
Retrieves the x-coordinate of the position of the cursor when the mouse is clicked, relative to the size of the client area of the window but excluding window decorations or scroll bars. |
| clientY |
Returns the y-coordinate of the position of the cursor when the mouse is clicked, relative to the size of the client area of the window but excluding window decorations or scroll bars. |
| offsetX |
Retrieves the horizontal coordinate of the mouse's position relative to the object firing the event. |
| offsetY |
Retrieves the vertical coordinate of the mouse's position relative to the object firing the event. |
| screenX |
Retrieves the horizontal position of the mouse, in pixels, relative to the user's screen. |
| screenY |
Retrieves the vertical position of the mouse, in pixels, relative to the user's screen. |
| srcElement |
Retrieves the object that fired the event. |
| type |
Retrieves the event name from the event object. |
| x |
Returns the horizontal position of the mouse when the event fires. |
| y |
Returns the vertical position of the mouse when the event fires. |
Often, onblur is used in form field validation. In the following example, userName is a required text field.
When a user attempts to leave the field, the onblur event calls a JavaScript function to confirm that userName has an acceptable value.
<input name="userName" onblur="validUserName(this.value)">
The example below demonstrates the use of the onblur event, to pass the name of the source element wherein the event occurs, to a function that simply displays which object has lost focus.
Sample Code
<head>
<script language="JavaScript">
function leave ( field ){
alert ( 'The focus has just left the ' + field + ' field.' )
}
</script>
</head>
<body>
<div align="center">
<form><table>
<tr>
<td>First Name</td>
<td><input type="text" name="FirstName"
onblur="leave(name)"></td></tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="LastName"
onblur="leave(name)"></td></tr>
<tr>
<td>Phone Number</td>
<td><input type="text" name="PhoneNumber"
onblur="leave(name)"></td></tr>
</table></form></div>
</body>
Show me
BUTTON, INPUT, LABEL, SELECT, TEXTAREA, window
blur, focus, onchange, onclick, onfocus