HTML5 practice and analysis focus management (activeElement and hasFocus)

Today's websites are paying more and more attention to people with disabilities. Many websites have begun to create convenient channels for people with poor eyesight to facilitate their Webpage Browsing. The following describes the focus management and blind websites, hoping to help you.

Websites in the 21st century are paying more and more attention to people with disabilities. Other types of disability are worth mentioning. If people with poor eyesight visit websites, they basically don't know how to browse them. People with poor eyesight can browse the website by getting the focus, mainly by reading the content after getting the focus. Therefore, focus management is particularly important when creating websites for people with poor eyesight.

Considering that people with poor eyesight exist objectively, HTML5 adds the function of managing DOM focus.

1. document. activeElement attributes

The Document. activeelement attribute always references the element in the DOM that currently gets the focus. Element focus can be obtained by user input (usually by pressing the Tab key), calling the focus () method in code, and page loading. Let's take a look at a small example.

HTML code

JavaScript code

Window. onload = function () {var btn = document. getElementById ("btn"); // obtain the focus alert (document. activeElement. id) // body // call the focus () method to obtain the focus btn. focus (); alert (document. activeElement. id) // btn };

By default, when the document is loaded, the reference of the document. body element is saved in document. activeelement. The document. activeelement value is null during document loading. You can use document. activeelement to determine whether the document has been loaded.

2. document. hasFocus () method

In addition to the new document. activeelement attribute, HTML5 also adds the document. hasfocus () method. This method is used to determine whether the document gets the focus. Let's take a look at a small example.

HTML code

JavaScript code

window.onload = function(){var btn = document.getElementById("btn");alert(document.hasFocus())  //true};

With the hasFocus () method, we can check whether the document gets the focus and whether the user is interacting with the page.

The most important use of these two functions is to query the document to know which element gets the focus and determine whether the document gets the focus. A major sign of accessibility Web applications is proper focus management, and it is a great progress to know which element has obtained the focus. At least we don't have to rely on speculation like in the past. Let's take a look at a small example.

HasFocus () Small application example

HTML code

Move the mouse up to get the focus

JavaScript code

window.onload = function(){var oMeng = document.getElementById("meng");var oLong = document.getElementById("long");oMeng.onmouseover = getFocus;oMeng.onmouseout = loseFocus;function getFocus(){if (document.hasFocus()){oLong.style.display = "block";}}function loseFocus(){oLong.style.display = "none";}};

The above example uses the hasFocus () method to determine whether the focus is obtained. This also makes us feel the charm of the hasFocus () method and the usefulness of focus management. Browsers that can implement this hasFocus () method and activeElement attributes include FireFox 3 +, Safari 4 +, Chrome, Opera 8 +, and IE 4 +.

The focus management (activeElement and hasFocus) of HTML5 practice and analysis will be shared here. Web application accessibility in China is still to be developed. Master the focus management (activeElement and hasFocus) to achieve Web application accessibility. Thank you for your support for Menglong xiaostation. For more information about HTML5, please pay attention to the updates related to the actual HTML5 practice and Analysis of Menglong xiaostation.