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

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

focus method

Browser support:

Sets the focus on the current element.

The focus method 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 not only sets an element as the active element, but also tries to bring the application window into the foreground. Note: sometimes that is not possible from JavaScript, because of security settings.

The Internet Explorer specific setActive method is similar to the focus method, it activates an element, but does not try to bring the application window into the foreground. See Example 2 for details.

You can get the active element with the activeElement property. Calling the focus method fires the focus and activation related events on the element. For details, see the pages for the onfocus and onactivate events.

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

If you need to simulate other events, see the pages for the dispatchEvent and fireEvent methods.

Syntax:

object.focus ( );

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 focus method:

<head>
    <script type="text/javascript">
        function SetFocus () {
            var input = document.getElementById ("myInput");
            input.focus ();
        }

        function RemoveFocus () {
            var input = document.getElementById ("myInput");
            input.blur ();
        }
    </script>
</head>
<body>
    <input id="myInput" value="An input field"/>
    <br /><br />
    Move the mouse over the following texts and watch the input field.
    <br /><br />
    <div onmousemove="SetFocus ();">Set the focus to the input field</div>
    <div onmousemove="RemoveFocus ();">Remove the focus from the input field</div>
</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>