You are here: Reference > JavaScript > client-side > event handling > events > onfocus

onfocus event | focus event

Browser support:
Occurs when an element receives focus.
An element with focus is always the active element in a document, but an active element does not necessarily have focus. For example, an active element within a window that is not the foreground window has no focus. Only one element can be active at a time in a document.
  • You can get the active element with the activeElement property.
  • To set the active element in a document, use the focus and setActive methods.
  • To determine whether the active element has focus, use the hasFocus method.
The onfocus event is not cancelable. If you want to prevent an element from getting the focus, set the disabled property of the element to true. See the examples for details.
To detect when an element loses focus, use the onblur event.

How to register:

In HTML:
<ELEMENT onfocus="handler">

In JavaScript:
object.onfocus = handler;
object.addEventListener ("focus", handler, useCapture);
9
object.attachEvent ("onfocus", handler);
You can find the related objects in the Supported by objects section below.
The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.
For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles No
Cancelable No
Event object
FocusEvent
9
Event

Actions that invoke the onfocus event:

  • Clicking on a non-active element that can be active (see the setActive method).
  • Navigating to an element with the TAB or an access key.
  • Occurs on the active element when the document window comes to the foreground.
  • Invoking the setActive method on a non-active element that can be active.
  • Invoking the focus method on a non-active element that can be active.

The order of events related to the onfocus event:

Action Event order
If an element is the active element and the document window comes to the foreground.
Internet Explorer Firefox Opera Google Chrome and Safari
  1. onfocusin
  2. onfocus
  1. onfocus
Any other action that invokes the onfocus event.
Internet Explorer Firefox Opera Google Chrome and Safari
  1. onbeforeeditfocus (only for editable elements)
  2. onbeforeactivate
  3. onactivate
  4. onfocusin
  5. onfocus
  1. onfocus
  2. DOMActivate
  1. onfocus
  2. DOMFocusIn
  1. onfocus
  2. DOMFocusIn
  3. DOMActivate

Example HTML code 1:

This example illustrates the use of the onfocus event:
<head>
    <script type="text/javascript">
        function OnFocusInput (input) {
            input.style.color = "red";
        }

        function OnBlurInput (input) {
            input.style.color = "";
        }
    </script>
</head>
<body>
    When the following input field has the focus its text color will be red.
    Click into the input field!
    <br /><br />
    <input type="text" onfocus="OnFocusInput (this)" onblur="OnBlurInput (this)" value="Custom input field"/>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to prevent an element from getting the focus:
<head>
    <script type="text/javascript">
        function OnAllowFocusChanged (checkbox) {
            var textField = document.getElementById ("myText");
            textField.disabled = !checkbox.checked;
        }

    </script>
</head>
<body>
    <input type="checkbox" checked="checked" onchange="OnAllowFocusChanged (this)"/>Allow the text field to get the focus
    <br />
    <input type="text" id="myText" value="Text field"/>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content