使用JS取得焦点(focus)元素代码
更新时间：2014年03月22日 16:13:40 作者：
这篇文章主要介绍了使用JS取得焦点(focus)元素的具体实现,需要的朋友可以参考下
对于良好的用户体验来说,网站/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。 总而言之,我对它很满意,觉得它非常可靠!
当我们的网站运行良好/体验很好的时候,用户是意识不到的,但我们做得不好时他们肯定会感觉到。 应用程序的可用性和可访问性的一个重要组成部分是输入焦点(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 array数组检测方式解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
函数是js世界的一等公民，js的动态性、易变性在函数的应用上，体现的淋漓尽致。下面这篇文章主要给大家介绍了关于JavaScript学习笔记之惰性函数的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-08-08
这篇文章主要介绍了JS面试题大坑之隐式类型转换实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-10-10
这篇文章主要介绍了JS判断是否手机或pad访问实现方法的相关资料,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了JS实现仿Windows经典风格的选项卡Tab切换代码,涉及JavaScript元素的遍历与样式的修改技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
在开发uniapp应用时,可能会遇到文件上传功能在iOS和部分Android手机上不兼容的问题,经过对比分析,发现问题可能出在文件的路径上,通过使用uni.saveFile方法保存文件后,再上传可以解决问题,这篇文章详细介绍了解决方案,并引导读者参考更多相关内容2024-09-09
这篇文章主要介绍了微信小程序3D轮播实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
JavaScript如何读取本地excel文件、txt文件的内容
JavaScript是一种脚本语言,广泛应用于前端开发,这篇文章主要给大家介绍了关于JavaScript如何读取本地excel文件、txt文件的内容,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-06-06
javascript下拉菜单想必大家在浏览网页的时候都会看到吧，已不是那么陌生了，本文介绍使用javascript实现级联下拉列表实例，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-05-05
这篇文章为大家详细主要介绍了JavaScript实现垂直滚动条效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
最新评论