Skip to content
Related Articles

Related Articles

HTML | DOM hasFocus() Method
  • Last Updated : 30 Jul, 2019
GeeksforGeeks - Summer Carnival Banner

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.

Below examples illustrate the HTML DOM hasfocus() method:



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




<!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() {
            var 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:

Initially:

After pressing in the document:

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

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




<!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()", 1);
  
        function hasfocustest() {
            var x = document.getElementById("para");
            if (document.hasFocus()) {
                x.style.background = "palegreen";
            } else {
                x.style.background = "white";
            }
        }
    </script>
</body>
  
</html>
</html>

Output:

Initially:

After pressing in the document:

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

  • Google Chrome 30.0
  • Internet Explorer 6.0
  • Firefox 3.0
  • Opera 23.0
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :