使用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 相关文章推荐
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
js实现select跳转功能代码
Oct 22 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 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判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
python实现简单socket通信的方法
2016/04/19 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
python selenium 弹出框处理的实现
2019/02/26 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
烹饪自我鉴定
2014/03/01 职场文书
2014高考励志标语
2014/06/05 职场文书
金融与证券专业求职信
2014/06/22 职场文书
小学亲子活动总结
2014/07/01 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android