HTML5实战与剖析之焦点管理(activeElement和hasFocus)

最新推荐文章于 2021-06-27 02:04:37 发布

云圣天

最新推荐文章于 2021-06-27 02:04:37 发布

阅读量4.3k

点赞数

分类专栏： HTML5实战与剖析 HTML5实战与剖析文章标签： activeElement hasFocus HTML5 HTML5实战与剖析 HTML5实战与剖析之焦点管理

本文链接：https://blog.csdn.net/lee_magnum/article/details/17608907

版权

HTML5实战与剖析同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

HTML5实战与剖析

31 篇文章 21 订阅

订阅专栏

　　现在的网站越来越注重残障人士了，很多网站都开始有专为视力不好的人们制作一些便捷通道，方便他们进行浏览网页。下面就为大家介绍一下有关焦点管理和盲人网站方面的事儿，希望能对大家有所帮助。

　　21世纪的网站，越来越注重残障人士了，其他伤残类型还好说一些，要是视力方面不太好的人们去浏览网站，基本上是不知道怎么浏览。视力不好的人们去浏览基本上是靠获取焦点来浏览网站的，主要是靠获取焦点以后读取内容来浏览网站的。所以焦点管理在为视力不好的人们制作网站的时候是尤为重要的。

　　正因为考虑到视力不好的人们是客观存在的，所以HTML5添加了辅助管理DOM焦点的功能。

　　1、document.activeElement属性

　　Document.activeelement属性始终会引用DOM中当前获得了焦点的元素。元素获得焦点的方式有用户输入(通常是按Tab键)、在代码中调用focus()方法和页面加载。先来看个小例子。

　　HTML代码

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

　　JavaScript代码

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

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

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

　　默认情况下，文档刚刚加载完成的时候，document.activeelement中保存的是document.body元素的引用。文档加载期间，document.activeelement的值为null。通过document.activeelement可以判断文档是否加载完成。

　　2、document.hasFocus()方法

　　HTML5除了新添加了document.activeelement属性，还添加了document.hasfocus()方法。这个方法用于确定文档是否获得了焦点。先来看个小例子。

　　HTML代码

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

　　JavaScript代码

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

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

　　有了hasFocus()方法，我们就可以检测文档是否获得了焦点，可以知道用户是不是在与页面交互。

　　查询文档获知哪个元素获得了焦点，以及确定文档是否获得了焦点，这两个功能最重要的用途是提供Web应用的无障碍性。无障碍Web应用的一个主要标志就是恰当的焦点管理，而确切知道哪个元素获得了焦点是一个极大的进步，至少我们不用像过去一样靠猜测了。先来看个小例子。

　　hasFocus()应用小例子

　　HTML代码

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

　　JavaScript代码

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";
	}

};

　　上面这个例子充分运用了hasFocus()方法来判断是否获得了焦点。从而也让我们感觉了一下hasFocus()方法的魅力，以及焦点管理的用处。能够实现这hasFocus()方法和activeElement属性的浏览器有：FireFox 3+、Safari 4+、Chrome、Opera 8+ 和IE 4+。

　　HTML5实战与剖析之焦点管理(activeElement和hasFocus)就为大家分享到这里。中国Web应用无障碍化还有待发展，掌握好焦点管理(activeElement和hasFocus)，基本上能够实现Web应用无障碍化。感谢大家对梦龙小站的支持，更多有关HTML5的跟新敬请关注梦龙小站HTML5实战与剖析的相关更新。

云圣天

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5实战与剖析之焦点管理(activeElement和hasFocus)

现在的网站越来越注重残障人士了，很多网站都开始有专为视力不好的人们制作一些便捷通道，方便他们进行浏览网页。下面就为大家介绍一下有关焦点管理和盲人网站方面的事儿，希望能对大家有所帮助。
复制链接

扫一扫