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

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

onbeforedeactivate event | beforedeactivate event

Browser support:

Occurs on the active element before it loses the active state.

The onbeforedeactivate event is cancelable (unlike the ondeactivate event), therefore it is useful if you want to prevent the deactivation of an element.

If you need similar functionality in Firefox, Opera, Google Chrome and Safari, see Example 3.

To detect when an element becomes active, use the onbeforeactivate, onactivate and DOMActivate events.

How to register:

In HTML:

In JavaScript:

object.onbeforedeactivate = handler;

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

9

object.attachEvent ("onbeforedeactivate", 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	Yes
Event object	UIEvent

Actions that invoke the onbeforedeactivate event:

Clicking outside the active element.
Navigating away from the active element with the TAB or an access key.
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 onbeforedeactivate event:

Action	Event order
Any action that invokes the onbeforedeactivate event.	onbeforedeactivate ondeactivate onfocusout onblur

Example HTML code 1:

This example illustrates the use of the onbeforedeactivate event for a button element:

<head>
    <script type="text/javascript">
        function CancelDeActivation (event) {
                // prevent the propagation of the current event
            if (event.stopPropagation) {
                event.stopPropagation ();
            }
            else {
                event.cancelBubble = true;
            }
                // cancel the current event
            return false;
        }
    </script>
</head>
<body>
    The second button cannot be deactivated.<br />
    Activate it first (click on it or use the TAB key to navigate through the buttons or press the ALT+2 access key)
    and try to deactivate it!
    <br /><br />
    <button accesskey="1">ALT + 1</button>
    <button accesskey="2" onbeforedeactivate="return CancelDeActivation (event);">ALT + 2</button>
    <button accesskey="3">ALT + 3</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the onbeforedeactivate event for an input:text element:

<head>
    <script type="text/javascript">
        function CancelDeActivation (event) {
                // prevent the propagation of the current event
            if (event.stopPropagation) {
                event.stopPropagation ();
            }
            else {
                event.cancelBubble = true;
            }
                // cancel the current event
            return false;
        }
    </script>
</head>
<body>
    The second text field cannot be deactivated.<br />
    Activate it first (click on it or use the TAB key to navigate through the controls or press the ALT+2 access key)
    and try to deactivate it!
    <br /><br />
    <input accesskey="1" value="ALT + 1" />
    <input accesskey="2" value="ALT + 2" onbeforedeactivate="return CancelDeActivation (event);"/>
    <input accesskey="3" value="ALT + 3" />
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates a cross-browser solution for the previous one:

<head>
    <script type="text/javascript">
            // Internet Explorer
        function CancelDeActivation (event) {
                // prevent the propagation of the current event
            if (event.stopPropagation) {
                event.stopPropagation ();
            }
            else {
                event.cancelBubble = true;
            }
                // cancel the current event
            return false;
        }
        
        function KeepFocus (elem) {
            if (elem.onbeforedeactivate) {  // Internet Explorer
                return false;
            }
            
                // elem.focus () does not work in Firefox, a timer is needed
            setTimeout (SetFocus, 0, elem);
        }

        function SetFocus (elem) {
            elem.focus ();
        }

    </script>
</head>
<body>
    The second text field cannot be deactivated.<br />
    Activate it first (click on it or use the TAB key to navigate through the controls or press the ALT+2 access key)
    and try to deactivate it!
    <br /><br />
    <input accesskey="1" value="ALT + 1" />
    <input accesskey="2" value="ALT + 2" onblur="KeepFocus (this)" onbeforedeactivate="return CancelDeActivation (event);"/>
    <input accesskey="3" value="ALT + 3" />
</body>