HTML DOM hasFocus() Method

Last Updated : 12 Jun, 2023

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>

Output:

Supported Browser: The browsers supported by the method are listed below:

Google Chrome 1
Edge 12
Internet Explorer 5.5
Firefox 3
Opera 15
Safari 4

C

chaitanyashah707

Improve

Article Tags :

Similar Reads

HTML DOM getElementsByTagName() Method

The getElementsByTagName() method in the HTML DOM allows the selection of elements by their tag name. It returns a collection of elements with the specified tag name within the specified document or element. To extract any info just iterate through all the elements using the length property.Â Syntax:

HTML DOM length Property

The DOM length property in HTML is used to get the number of items in a NodeList object. A NodeList is a collection of child Nodes. For example, the NodeList of the body will contain all the child nodes in the body i.e. paragraphs, comments, headings, script, etc.Syntax: nodelist.lengthReturn Value:

HTML DOM value Property

The DOM value property in HTML is used to set or return the value of any attribute.Syntax: It returns the attribute value. attribute.valueIt is used to set a value to the property. attribute.value = valueProperty Value: value: It defines the value of the attribute.Return Value: It returns a string v

HTML DOM normalize() Method

The normalize() method in HTML is used to merge the adjacent text nodes with the first text node and flush out the empty nodes. The normalize() method does not require any parameter. Syntax: node.normalize() Example 1: In this example, we will use normalize() method. HTML <!DOCTYPE html> <h

HTML DOM links Collection

The DOM links collection is used to return the collection of all <a> and <area> elements with the "href" attribute in the HTML document. The elements in the collection are sorted as they appear in the sourcecode. Syntax: document.links Properties: It contains a single property length whi

HTML DOM open() Method

The DOM Open() method in HTML is the combination of the following three steps: Opens an output stream to collect the output.Collects output from the document.write() or document.writeln() methods.Runs the document.close to display the output written to the output stream. Syntax: document.open( MIMEt

HTML DOM designMode Property

The DOM designMode property in HTML is used to specify whether the document is editable or not. It can also be used to set the document editable.Â Syntax:Set: This property is used to set whether the document is editable or not.document.designMode = "on|off";Get: This property is used to return wheth

HTML DOM Style borderCollapse Property

The DOM Style borderCollapse property in HTML is used to set or return whether the border of the table collapsed into a single border or not. Syntax: It is used to return the borderCollapse property.object.style.borderCollapse It is used to set borderCollapse property.object.style.borderCollapse = "

HTML DOM Style borderBottom Property

The DOM style borderBottom property is used to set or return the three different border-bottom properties such as border-bottom-width, border-bottom-style, and border-bottom-color of an element. Syntax: It returns the borderBottom Property.object.style.borderBottomIt is used to set the borderBottom

HTML DOM Style color Property

The DOM style color property is used to set or return the color of the text. Syntax: It is used to set the color property.object.style.colorIt is used to return the color property.object.style.color = "color|initial|inherit" Return Values: It returns a string value that represents a text-color of an