activeElement 获取焦点

来源：互联网发布：ads射频仿真软件编辑：程序博客网时间：2024/06/08 07:42

activeElement

当前获得焦点的元素:

var x = document.activeElement.tagName;

获取当前焦点ID

var x = document.activeElement.id;

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实战与剖析的相关更新。

0 0