HTML5实战与剖析之焦点管理(activeElement和hasFocus)
来源:互联网 发布:手机淘宝上消费总额查 编辑:程序博客网 时间:2024/06/05 00:12
现在的网站越来越注重残障人士了,很多网站都开始有专为视力不好的人们制作一些便捷通道,方便他们进行浏览网页。下面就为大家介绍一下有关焦点管理和盲人网站方面的事儿,希望能对大家有所帮助。
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实战与剖析的相关更新。
- HTML5实战与剖析之焦点管理(activeElement和hasFocus)
- HTML5实战与剖析之历史管理(history对象)
- HTML5实战与剖析之表单——自动获取焦点属性(autofocus属性)
- HTML5实战与剖析之字符集属性(charset和defaultCharset)
- HTML5实战与剖析之延迟脚本
- HTML5实战与剖析之classList属性
- HTML5实战与剖析之剪贴板事件
- HTML5实战与剖析之WebSockets简介
- HTML5实战与剖析之WebSocket协议
- HTML5实战与剖析之离线应用
- HTML5实战与剖析之使用HTML5 WebSocket API
- HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
- HTML5实战与剖析之原生拖拽(二拖拽事件dragstart、drag和dragend)
- HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
- HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)
- HTML5实战与剖析之媒体元素(4、检测编解码器的支持和Audio构造函数)
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
- mb_substr使用中出现的一点问题
- 10、手机防盗--利用样式设计向导界面
- 关于systemui:keyCode
- OSG中的示例程序简介
- 百度地图的初级使用学习
- HTML5实战与剖析之焦点管理(activeElement和hasFocus)
- 学习android的过程
- Hadoop框架之HDFS的shell操作
- 七个高效的文本编辑习惯(以Vim为例)
- 揭开正则表达式的神秘面纱
- iOS 导航控制器、标签、表视图的创建方法
- 他只得了1%,我们不能雇用他
- 解决!Visual Studio 遇到了异常。这可能是由某个扩展导致的。
- linux 用户和用户组操作