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

You are here: Reference > JavaScript > client-side > event handling > methods > setActive

setActive method

Browser support:

Sets the element as the active element in the current document.

Only one element can be active at a time in a document. Not every HTML element can be an active element, typically the form controls and the body object can be activated. Some other elements can be activated depending on the browser, furthermore elements in contentEditable mode and elements with the tabIndex property specified can also be active.

An active element does not necessarily have focus, but an element with focus is always the active element in the document. For example, an active element within an application window that is not the foreground window has no focus.

The focus method is similar to the setActive method, it also activates an element, but it tries to bring the application window into the foreground. Note: sometimes that is not possible from JavaScript, because of security settings. See Example 2 for details.

You can get the active element with the activeElement property. Calling the setActive method fires the activation related events on the element. If the application window is in the foreground, the focus related events will be fired too. For details, see the pages for the onactivate and onfocus events.

Note: browsers do not scroll the activated element into the visible area automatically; use the scrollIntoView method for that purpose.

Syntax:

object.setActive ( );

You can find the related objects in the Supported by objects section below.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the setActive method:

<head>
    <script type="text/javascript">
        function ChangeActive (id) {
            var obj = document.getElementById (id);
            if (obj.setActive) {
                obj.setActive ();
            }
            else {
                if (obj.focus)
                    obj.focus ();
                else
                    alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    <button id="myButton1" onclick="ChangeActive ('myButton2')">Button 1</button>
    <br />
    <button id="myButton2" onclick="ChangeActive ('myButton1')">Button 2</button>
    <br />
    Click on one of the buttons to set the other button active!
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the difference between the focus and setActive methods:

Code

focusTest.htm

<head>
    <script type="text/javascript">
        var testWindow = null;
        function OpenTestWindow () {
            testWindow = window.open ("focusTest.htm", "testWindow", "width=250, height=150, left=10, top=10");
        }

        function ActivateById (id, onlyActivate) {
            try {
                var obj = testWindow.document.getElementById (id);
                if (onlyActivate) {
                    if (obj.setActive)
                        obj.setActive ();
                    else
                        alert ("Your browser does not support the setActive method!");
                }
                else {
                    if (obj.focus) {
                        obj.focus ();
                    }
                    else
                        alert ("Your browser does not support the focus method!");
                }
                return;
            }
            catch (e) {};
            
            alert ("Please open the test window first!");
        }

        function GetActive () {
            try {
                if ('activeElement' in testWindow.document) {
                    var activeObj = testWindow.document.activeElement;
                    if (activeObj.tagName.toLowerCase () == "input")
                        alert (activeObj.value);
                    else
                        alert (activeObj.tagName);
                }
                else {
                    alert ("Your browser does not support the activeElement property!");
                }
                return;
            }
            catch (e) {};
            
            alert ("Please open the test window first!");
        }

    </script>
</head>
<body>
    First open the test window with the button below. <br />
    <button onclick="OpenTestWindow ();">Open the test window</button>

    <br /><br />
    Set one of the input fields as the active element and click on the title bar of the test window to see the result.<br />
    <button onclick="ActivateById ('input1', true);">Set the first input field as the active element</button>
    <button onclick="ActivateById ('input2', true);">Set the second input field as the active element</button>
    
    <br /><br />
    Set focus to one of the input fields. Click on the title bar of the test window if needed to see the result. <br />
    <button onclick="ActivateById ('input1', false);">Set focus to the first input field</button>
    <button onclick="ActivateById ('input2', false);">Set focus to the second input field</button>

    <br /><br />
    <button onclick="GetActive ();">Get the active element in the test window</button>
</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test window</title>
</head>
<body style="background-color:#fbd8a4;">
    <h1>Test window</h1>
    <input id="input1" value="first input field"/>
    <input id="input2" value="second input field"/>
    <br /><br />
</body>
</html>