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

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

onfocusin event | focusin event

Browser support:

Occurs before an element receives focus.

The onfocusin 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 onfocusin event of the element.

In Opera, Google Chrome and Safari, use the DOMFocusIn event instead of the onfocusin 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:

In JavaScript:

object.onfocusin = handler;

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

9

object.attachEvent ("onfocusin", 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 onfocusin 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 onfocusin event:

Action	Event order
If an element is the active element and the document window comes to the foreground.	onfocusin onfocus
Any other action that invokes the onfocusin event.	onbeforeeditfocus (only for editable elements) onbeforeactivate onactivate onfocusin onfocus

Example HTML code 1:

This example illustrates the use of the onfocusin 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>