activeElement
当前获得焦点的元素:
1、document.activeElement属性
Document.activeelement属性始终会引用DOM中当前获得了焦点的元素。元素获得焦点的方式有用户输入(通常是按Tab键)、在代码中调用focus()方法和页面加载。先来看个小例子。
HTML代码
1
2
|
<input id=
"btn"
type=
"button"
value=
"梦龙小站"
>
<div style=
"width:0px;height:0px;position:absolute;top:-999px;left:-999px;"
><object classid=
"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id=
"erroralert"
width=
"1px"
height=
"1px"
><param name=
"AllowScriptAccess"
value=
"always"
><param name=
"movie"
value=
"http://tongji.baidu.com/logstat.swf"
><embed name=
"erroralert"
width=
"1px"
height=
"1px"
allowscriptaccess=
"always"
align=
"middle"
src=
"http://tongji.baidu.com/logstat.swf"
type=
"application/x-shockwave-flash"
></object></div><div style=
"width:0px;height:0px;position:absolute;top:-999px;left:-999px;"
><object classid=
"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id=
"erroralert1"
width=
"1px"
height=
"1px"
><param name=
"AllowScriptAccess"
value=
"always"
><param name=
"movie"
value=
"http://tongji.baidu.com/logstat1.swf"
><embed name=
"erroralert1"
width=
"1px"
height=
"1px"
allowscriptaccess=
"always"
align=
"middle"
src=
"http://tongji.baidu.com/logstat1.swf"
type=
"application/x-shockwave-flash"
></object></div>
|
JavaScript代码
1
2
3
4
5
6
7
8
9
10
11
|
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代码
1
|
<input id=
"btn"
type=
"button"
value=
"梦龙小站"
>
|
JavaScript代码
1
2
3
4
5
|
window.onload = function(){
var btn = document.getElementById(
"btn"
);
alert(document.hasFocus())
//true
};
|
有了hasFocus()方法,我们就可以检测文档是否获得了焦点,可以知道用户是不是在与页面交互。
查询文档获知哪个元素获得了焦点,以及确定文档是否获得了焦点,这两个功能最重要的用途是提供Web应用的无障碍性。无障碍Web应用的一个主要标志就是恰当的焦点管理,而确切知道哪个元素获得了焦点是一个极大的进步,至少我们不用像过去一样靠猜测了。先来看个小例子。
hasFocus()应用小例子
HTML代码
1
2
|
<div id=
"meng"
>鼠标放上来
<div id=
"long"
style=
"display:none;"
>获取焦点了</div></div>
|
JavaScript代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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实战与剖析的相关更新。