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 > |
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