Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM hasFocus() Method

  • Last Updated : 30 Jul, 2019

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :