使用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 相关文章推荐
教你如何使用node.js制作代理服务器
Nov 26 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
js添加事件的通用方法推荐
May 15 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
实现高性能javascript的注意事项
May 27 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
design vue 表格开启列排序的操作
Oct 28 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
利用php输出不同的心形图案
2016/04/22 PHP
php 常用的系统函数
2017/02/07 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
JsRender for object语法简介
2014/10/31 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
selenium+python自动化测试之环境搭建
2019/01/23 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
什么是数组名
2012/05/10 面试题
办理护照介绍信
2014/01/16 职场文书
一年级班主任感言
2014/03/08 职场文书
高二学生评语大全
2014/04/25 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
收银员岗位职责
2015/02/03 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
Java Redisson多策略注解限流
2022/09/23 Java/Android