使用JS取得焦点(focus)元素
2014-03-21 20:29
295 查看
原文链接: Get the Focused Element with JavaScript
原文日期: 2014年3月19日
翻译日期: 2014年3月21日
翻译人员: 铁锚
对于良好的用户体验来说,网站/web app的可访问性和可用性,以及功能 都是至关重要的。
当我们的网站运行良好/体验很好的时候,用户是意识不到的,但我们做得不好时他们肯定会感觉到。 应用程序的可用性和可访问性的一个重要组成部分是输入焦点(focus)的处理,但这又是开发人员常常会忽视的一点。
对输入焦点处理很差的一个例子: 在点击一个链接以后打开一个模态窗口,但却不将光标聚焦到窗口中的任何元素内。 甚至更糟的是: 聚焦到模态窗口中的某个元素,但在关闭以后焦点照样不返回。 理想情况下,在触发链接时会保存一个引用,然后将光标聚焦到新窗口,并在窗口关闭时把光标重新移回去。
但假如你不知道输入光标现在在哪个元素上怎么办? 通过 document.activeElement属性我们可以取得当前文档中获得焦点的元素!
The JavaScript
使用 document.activeElement 来查找当前选中的元素是很容易的事:
这个属性不仅在常规输入元素上可用,包括表单字段或 <a> 标签链接,而且只要设置了 tabIndex 属性的任意元素都是可用的。
我喜欢 document.activeElement 的原因是,不需要使用事件监听或委托监听器来追踪记录下那个元素获得了焦点 —— 您可以随时获取这个属性。 当然在使用这样的特性之前你应该做大量的测试—— 是否在跨浏览器或竞态条件下出什么BUG。 总而言之,我对它很满意,觉得它非常可靠!
原文日期: 2014年3月19日
翻译日期: 2014年3月21日
翻译人员: 铁锚
对于良好的用户体验来说,网站/web app的可访问性和可用性,以及功能 都是至关重要的。
当我们的网站运行良好/体验很好的时候,用户是意识不到的,但我们做得不好时他们肯定会感觉到。 应用程序的可用性和可访问性的一个重要组成部分是输入焦点(focus)的处理,但这又是开发人员常常会忽视的一点。
对输入焦点处理很差的一个例子: 在点击一个链接以后打开一个模态窗口,但却不将光标聚焦到窗口中的任何元素内。 甚至更糟的是: 聚焦到模态窗口中的某个元素,但在关闭以后焦点照样不返回。 理想情况下,在触发链接时会保存一个引用,然后将光标聚焦到新窗口,并在窗口关闭时把光标重新移回去。
但假如你不知道输入光标现在在哪个元素上怎么办? 通过 document.activeElement属性我们可以取得当前文档中获得焦点的元素!
The JavaScript
使用 document.activeElement 来查找当前选中的元素是很容易的事:
var focusedElement = document.activeElement; /* 比如某个示例: var triggerElement = document.activeElement; myModal = new MyModal({ onOpen: function() { this.container.focus(); }, onClose: function() { triggerElement.focus(); } }); */
这个属性不仅在常规输入元素上可用,包括表单字段或 <a> 标签链接,而且只要设置了 tabIndex 属性的任意元素都是可用的。
我喜欢 document.activeElement 的原因是,不需要使用事件监听或委托监听器来追踪记录下那个元素获得了焦点 —— 您可以随时获取这个属性。 当然在使用这样的特性之前你应该做大量的测试—— 是否在跨浏览器或竞态条件下出什么BUG。 总而言之,我对它很满意,觉得它非常可靠!
相关文章推荐
- 使用JS取得焦点(focus)元素
- 使用JS取得焦点(focus)元素
- 使用JS取得焦点(focus)元素代码
- 使用JS取得焦点(focus)元素代码
- ASP.NET#使用母版时,如果要使用js中的getElementById()方法取得某个内容页的元素时要注意的问题
- 使用js操作子页面iframe内的元素节点
- JS中批量给元素绑定事件过程使用闭包解决
- 使用JS操作页面表格,元素的一些技巧
- Node.js 使用jQuery取得Nodejs http服务端返回的JSON数组示例
- IE6使用jquery.bgiframe.js解决select元素不会正常隐藏的BUG
- iframe使用方法之:用js操纵iframe里面的元素
- 【jQuery】使用jQuery.Actual.js插件获取隐藏元素的高和宽
- jquery ui dialog autofocus 去掉默认第一个元素获取焦点
- 使用js获得元素的属性值及事件名
- JavaScript使用focus()设置焦点失败的解决方法
- easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
- js dom 方法 js中cloneNode()的使用(复制元素)
- Js控制iphone端的input/textarea元素失去焦点时隐藏键盘
- 在js中使用createElement创建HTML对象和元素
- jquery-seat-charts 使用(去除第一个元素获取焦点)