onfocus (HTML attribute)

Spec
Depr. Version
No HTML 4
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+
Full Full Full Full

Syntax

onfocus="script"

Description

The onfocus attribute captures the moment when an element receives the focus of the user’s attention. This is determined to be the point at which a user clicks inside an element that can be activated or manipulated, such as a form input element or select element, both of which are used for data entry purposes, or an a element, which can be activated with the Return key.

Typically, this attribute is used to highlight the section of the page that currently has focus—a useful usability enhancement, particularly for people with low vision—or to provide additional information. For example, when a user’s completing a form, additional help text can be made to appear alongside the form input that currently has focus.

Note that this event attribute cannot be applied to the following elements:

  • applet
  • base
  • basefont
  • bdo
  • br
  • font
  • frame
  • frameset
  • head
  • html
  • iframe
  • isindex
  • meta
  • param
  • script
  • style
  • title

Example

The input below uses the onfocus attribute to trigger a piece of JavaScript. This script performs a little magic with the content found in the title attribute when the user tabs to that particular form input, or places the cursor inside the text field:

<input type="text" title="Date format = DD/MM/YYYY"
    onfocus="revealTitleHelp();" name="dateofbirth"/>

Value

This attribute has no fixed value. It’s up to the author to decide on the scripting that’s included here, be that a call to one or more defined functions, or a simple alert() statement.

Compatibility

Internet Explorer Firefox Safari Opera
5.5 6.0 7.0 1.0 1.5 2.0 1.3 2.0 3.0 9.2 9.5
Full Full Full Full Full Full Full Full Full Full Full

Every browser listed supports this attribute. However, inline event handlers such as this should be avoided. In the same way that inline CSS styles are frowned upon but externally defined CSS styles are considered good practice, inline event handlers should be stripped out and replaced with events attached unobtrusively through the DOM.

User-contributed notes

There are no comments yet.

Related Products