使用JS取得焦点(focus)元素代码


Posted in Javascript onMarch 22, 2014

对于良好的用户体验来说,网站/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。 总而言之,我对它很满意,觉得它非常可靠!

Javascript 相关文章推荐
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
jquery 页面全选框实践代码
Apr 02 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
jquery实现提示语淡入效果
May 05 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
Vue中全局变量的定义和使用
Jun 05 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
查找Oracle高消耗语句的方法
Mar 22 #Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 #Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 #Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 #Javascript
js获得网页背景色和字体色的方法
Mar 21 #Javascript
页面装载js及性能分析方法介绍
Mar 21 #Javascript
Js冒泡事件详解及阻止示例
Mar 21 #Javascript
You might like
PHP4实际应用经验篇(8)
2006/10/09 PHP
PHP学习资料汇总与网址
2007/03/16 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Django stark组件使用及原理详解
2019/08/22 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
python如何删除列为空的行
2020/07/17 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
小学教师事迹材料
2014/01/13 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
收费员岗位职责
2015/02/14 职场文书
房屋产权证明书
2015/06/19 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
Python的这些库,你知道多少?
2021/06/09 Python
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技