<html>
<head>
<title>HTML5_焦点管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function(){
/*
HTML5添加了辅佐管理DOM焦点的功能。首先就是document.activeElement属性,这个属性
始终会引用DOM中当前获得的了焦点的元素。元素获得焦点的方式有页面加载、用户输入(通常
通过Tab键)和代码中调用focus()方法。来看几个例子。
*/
var button = document.getElementById("myButton");
button.focus();//获取焦点
alert(document.activeElement == button);//true
/*
默认情况下文档加载完成是,document.activeElement会保存document.body元素的引用。
文档加载期间会document.activeElement的值为null。
另外就是新增了document.hasFocus()方法,用于检测文档是否获得焦点。
*/
var isFocus = document.hasFocus();
alert(isFocus);//true
/*
通过检测文档是否获得焦点,可知道用户是否在和页面交互。
查询文档获知哪个元素获得了焦点,以及确定文档是否获得焦点,这两个功能最重要的提高
web的无障碍性。无障碍web应用的一个主要标志就是恰当的焦点管理,而确、切的知道哪个元素
获得了焦点是一个极大的进步,至少我们不要向过去一样来猜测了。
实现了这两个属性的浏览器包括IE4+、fireFox 3+、Safari4+、Chrome 和Opera 8+。
*/
}
</script>
</head>
<body>
<button id="myButton">
button
</button>
</body>
</html>
HTML5_焦点管理
最新推荐文章于 2021-08-17 17:49:51 发布