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

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

DOMFocusIn event

Browser support:

Occurs before an element receives focus.

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

In Internet Explorer, use the onfocusin event instead of the DOMFocusIn event.
In Firefox, if you need to detect whether a child of an element gets the focus, use a capturing listener for the onfocus event. See the examples for details.

To detect when an element loses focus, use the onblur, onfocusout and DOMFocusOut events.

How to register:

In HTML:

This event cannot be registered in HTML.

In JavaScript:

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

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	UIEvent

Actions that invoke the DOMFocusIn event:

Clicking on a non-active element that can be active (see the focus method).
Navigating to an element with the TAB or an access key.
Invoking the focus method on a non-active element that can be active.

The order of events related to the DOMFocusIn event:

Any action that invokes the DOMFocusIn event.

Opera	Google Chrome and Safari
onfocus DOMFocusIn	onfocus DOMFocusIn DOMActivate

Example HTML code 1:

This example illustrates the use of the DOMFocusIn event:

<head>
    <script type="text/javascript">
        function Init () {
            var form = document.getElementById ("myForm");
            if (form.addEventListener) {
                    // Opera, Google Chrome and Safari
                form.addEventListener ("DOMFocusIn", OnFocusInForm, false);
                form.addEventListener ("DOMFocusOut", OnFocusOutForm, false);
            }
        }

        function OnFocusInForm (event) {
            if (event.target) {
                event.target.style.color = "red";
            }
        }
        function OnFocusOutForm (event) {
            if (event.target) {
                event.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>

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

DOMFocusOut

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments