Home > Article > Web Front-end > HTML5 practice and analysis focus management (activeElement and hasFocus)

HTML5 practice and analysis focus management (activeElement and hasFocus)

黄舟Original: 2017-02-10 14:57:281931browse

Nowadays, websites are paying more and more attention to people with disabilities. Many websites have begun to create some convenient channels for people with poor vision to facilitate them to browse the web. Below I will introduce to you some things about focus management and websites for blind people. I hope it will be helpful to you.

Websites in the 21st century are paying more and more attention to people with disabilities. Other types of disabilities are easier to say. If people with poor eyesight go to browse the website, they basically don’t know how to browse. People with poor eyesight basically rely on getting focus to browse the website, and mainly rely on getting the focus to read the content to browse the website. So focus management is particularly important when making websites for people with poor vision.

Precisely because people with poor eyesight exist objectively, HTML5 has added a function to assist in managing DOM focus.

1. document.activeElement property

The Document.activeelement property always refers to the element in the DOM that currently has the focus. Elements gain focus through user input (usually pressing the Tab key), calling the focus() method in code, and page loading. Let’s look at a small example first.

HTML code

<body id="body">
  <input id="btn" type="button" value="梦龙小站" />
</body>

JavaScript code

window.onload = function(){
	var btn = document.getElementById("btn");

	//页面加载获取焦点
	alert(document.activeElement.id) // body
	
	//调用focus()方法获取焦点
	btn.focus();

	alert(document.activeElement.id) // btn
};

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

2. document.hasFocus() method

In addition to the newly added document.activeelement attribute, HTML5 also adds the document.hasfocus() method. This method is used to determine whether the document has focus. Let’s look at a small example first.

HTML code

<body id="body">
  <input id="btn" type="button" value="梦龙小站" />
</body>

JavaScript code

window.onload = function(){
	var btn = document.getElementById("btn");

	alert(document.hasFocus())  //true
};

With the hasFocus() method, we can detect whether the document has gained focus and know whether the user is interacting with the page. .

The most important use of querying a document to know which element has received focus, and determining whether a document has received focus, is to provide accessibility to web applications. One of the main hallmarks of an accessible web application is proper focus management, and knowing exactly which element has focus is a huge improvement. At least we don't have to guess as much as we used to. Let’s look at a small example first.

HasFocus() application example

HTML code

<p id="meng">鼠标放上来</p>
<p id="long" style="display:none;">获取焦点了</p>

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 makes full use of the hasFocus() method to determine whether to obtain focus. This also allows us to feel the charm of the hasFocus() method and the usefulness of focus management. Browsers that can implement this hasFocus() method and activeElement attribute are: FireFox 3+, Safari 4+, Chrome, Opera 8+ and IE 4+.

HTML5 actual combat and analysis of focus management (activeElement and hasFocus) are shared here with everyone. The accessibility of web applications in China still needs to be developed. If you master focus management (activeElement and hasFocus) well, you can basically achieve the accessibility of web applications. Thank you for your support to Menglong Station. For more updates about HTML5, please pay attention to the relevant updates of the actual combat and analysis of HTML5 in Menglong Station.

The above is the content of HTML5 actual combat and analysis of focus management (activeElement and hasFocus). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 actual combat and analysis of classList attributeNext article：HTML5 actual combat and analysis of classList attribute

See more

HTML5 practice and analysis focus management (activeElement and hasFocus)

1. document.activeElement property

HTML code

JavaScript code

2. document.hasFocus() method

HTML code

JavaScript code

HasFocus() application example

HTML code

JavaScript code

Related articles