HTML DOM hasFocus() Method

In HTML document, the document.hasfocus() the method is used for indicating whether an element or document has the focus or not. The function returns a true value if the element is focused otherwise false is returned. This method can be used to determine whether the active element is currently in focus.

Syntax:

document.hasfocus();

Parameters: This method has no parameters.

Return Value: The hasfocus() method returns a Boolean value indicating whether an element or document has focus or not.

The below examples illustrate the HTML DOM hasfocus() method:

Example 1: This example illustrates whether the document has a focus or not.

HTML

<!DOCTYPE html>
<html>
<title>
    HTML DOM hasFocus() Method
</title>
<body>
    <p>
        Click anywhere in the document to
        test hasfocus() function.
    </p>
    <p id="para"></p>
    <script>
        setInterval("hasfocustest()", 1);
        function hasfocustest() {
            let x = document.getElementById("para");
            if (document.hasFocus()) {
                x.innerHTML =
                    "The document has focus.";
            } else {
                x.innerHTML =
                    "The document DOES NOT have focus.";
            }
        }
    </script>
</body>
</html>

Output:

Explanation: The setinterval() function calls the hasfocustest() in 1 millisecond which after evaluation produces a result.

Example 2: This example illustrates changes background-colour of the heading based on whether the document has focus or not.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM hasFocus() Method
    </title>
</head>
 
<body>
    <p>
        Click anywhere in the document to
        test hasfocus() function.
    </p>
    <h1 id="para"> Function Testing</h1>
    <script>
        setInterval("hasfocustest()", 2000);
 
        function hasfocustest() {
           let x = document.getElementById("para");
            if (document.hasFocus()) {
                x.style.background = "palegreen";
            } else {
                x.style.background = "white";
            }
        }
    </script>
</body>
</html>