使用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 相关文章推荐
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
自定义vue组件发布到npm的方法
May 09 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
PHP性能优化大全(php.ini)
2016/05/20 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Django卸载之后重新安装的方法
2017/03/15 Python
python实现音乐下载器
2018/04/15 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
软件测试英文面试题
2012/10/14 面试题
软件售后服务承诺书
2014/05/21 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
志愿者个人总结
2015/03/03 职场文书
上课迟到检讨书
2015/05/06 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
详解Python中__new__方法的作用
2022/03/31 Python
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers