Fires when the object receives the focus.
| Inline |
<element onfocus = "handler" ... > |
| Script |
object.onfocus = handler |
| Bubbles |
No |
| Cancels |
No |
| To invoke |
Give focus to an object.
- Click an object.
- Use keyboard navigation.
- Invoke the focus method.
|
| Default action |
Sets focus to an object. |
A focus event occurs when an element receives focus either via a 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 browsers support the event in any element that can receive the focus, such as links in anchors and area elements.
When focus is switched from one object to another, the onfocus event fires on the object receiving focus only after the onblur event fires on the object losing focus.
The focus events are useful for determining when to prepare an object to receive 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. |
| returnValue |
Sets or retrieves the return value from 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. |
The following sample demonstrates use of the onfocus event to make an INPUT Text and LABEL object more accessible.
When the INPUT Text object has focus, the onfocus event fires and the backgroundColor, fontSize, and fontWeight properties are changed to give the control more prominence.
Sample Code
<head>
. . .
<style type="text/css">
<!--
.input {background-color:ivory;color:navy}
.label {color:maroon;font:bold}
—>
</style>
<script language="JavaScript">
<!--
function setStyle ( ) {
event.srcElement.className="input";
var labelInFocus=eval(event.srcElement.id + "_label");
labelInFocus.className="label"
}
function defStyle ( ) {
event.srcElement.className="";
var labelInFocus=eval(event.srcElement.id + "_label");
labelInFocus.className=""
}
//—>
</script>
</head>
<body>
. . .
<table align="center" cellpadding=5>
<col align="right">
<tr>
<td><label for="txt1" id="txt1_label">
Enter some text</label></td>
<td><input type="text" onfocus="setStyle()"
onblur="defStyle()" id="txt1"></td></tr>
<tr>
<td><label for="txt2" id="txt2_label">
Enter more text</label></td>
<td><input type="text" onfocus="setStyle()"
onblur="defStyle()" id="txt2"></td></tr>
</table>
</body>
Show me
BUTTON, INPUT, LABEL, SELECT, TEXTAREA, window
blur, focus, onblur, onchange, onclick