In order to access this site you need to enable JavaScript!

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

onfocusout event | focusout event

Browser support:

Occurs after an element loses focus.

The onfocusout event bubbles up (unlike the onblur event), so if you want to detect whether an element or its child loses focus, it is sufficient to listen for the onfocusout event of the element.

In Opera, Google Chrome and Safari, use the DOMFocusOut event instead of the onfocusout event.
In Firefox, if you need to detect whether a child of an element loses focus, use a capturing listener for the onblur event. See the examples for details.

To detect when an element receives focus, use the onfocusin, DOMFocusIn and onfocus events.

How to register:

In HTML:

In JavaScript:

object.onfocusout = handler;

object.addEventListener ("focusout", handler, useCapture);

9

object.attachEvent ("onfocusout", 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	Yes
Cancelable	No
Event object	FocusEvent

Actions that invoke the onfocusout event:

Clicking outside the active element.
Navigating away from the active element with the TAB or an access key.
Switching to another document or application.
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.
Invoking the blur method on the active element.

The order of events related to the onfocusout event:

Action	Event order
Switching to another document or application.	onfocusout onblur
Any other action that invokes the onfocusout event.	onbeforedeactivate ondeactivate onfocusout onblur

Example HTML code 1:

This example illustrates the use of the onfocusout event:

<head>
    <script type="text/javascript">
        function OnFocusInForm (event) {
            event.srcElement.style.color = "red";
        }
        function OnFocusOutForm (event) {
            event.srcElement.style.color = "";
        }

    </script>
</head>
<body>
    Click on the text fields to see the result!
    <form onfocusin="OnFocusInForm (event)" onfocusout="OnFocusOutForm (event)">
        User name: <input type="text" value="my name"/><br />
        E-mail: <input type="text" value="myname@mydomain.com"/>
    </form>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

A cross-browser solution for the previous example:

<head>
    <script type="text/javascript">
        function Init () {
            var form = document.getElementById ("myForm");
            if ("onfocusin" in form) {  // Internet Explorer
                    // the attachEvent method can also be used in IE9,
                    // but we want to use the cross-browser addEventListener method if possible
                if (form.addEventListener) {    // IE from version 9
                    form.addEventListener ("focusin", OnFocusInForm, false);
                    form.addEventListener ("focusout", OnFocusOutForm, false);
                }
                else {
                    if (form.attachEvent) {     // IE before version 9
                        form.attachEvent ("onfocusin", OnFocusInForm);
                        form.attachEvent ("onfocusout", OnFocusOutForm);
                    }
                }
            }
            else {
                if (form.addEventListener) {    // Firefox, Opera, Google Chrome and Safari
                        // since Firefox does not support the DOMFocusIn/Out events
                        // and we do not want browser detection
                        // the focus and blur events are used in all browsers excluding IE
                        // capturing listeners, because focus and blur events do not bubble up
                    form.addEventListener ("focus", OnFocusInForm, true);
                    form.addEventListener ("blur", OnFocusOutForm, true);
                }
            }
        }

        function OnFocusInForm (event) {
            var target = event.target ? event.target : event.srcElement;
            if (target) {
                target.style.color = "red";
            }
        }
        function OnFocusOutForm (event) {
            var target = event.target ? event.target : event.srcElement;
            if (target) {
                target.style.color = "";
            }
        }

    </script>
</head>
<body onload="Init ()">
    Click on the text fields to see the result!
    <form id="myForm">
        User name: <input type="text" value="my name"/><br />
        E-mail: <input type="text" value="myname@mydomain.com"/>
    </form>
</body>