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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > activeElement (document)

activeElement property (document)

Browser support:

Returns a reference to the object that is currently designated as the active element in the document.

Only one element can be active at a time in a document. An active element does not necessarily have focus, but an element with focus is always the active element in a document. For example, an active element within a window that is not the foreground window has no focus.

To set the active element in a document, use the focus and setActive methods. To determine whether the active element has focus, use the hasFocus method.

Syntax:

object.activeElement;

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

This property is read-only.

Possible values:

Reference to the active element.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the activeElement property:

<head>
    <script type="text/javascript">
        function GetActive () {
            if (document.activeElement) {
                var output = document.getElementById ("output");
                output.innerHTML = document.activeElement.tagName;
            }
        }
    </script>
</head>
<body onclick="GetActive ();">
    Click anywhere on the page to get the active element
    <input id="myInput" value="input field" />
    <button>Sample button</button>
    <div id="output"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the differences between the focus and active state of elements:

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><br />
    <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><br />
    <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>