使用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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
js变量以及其作用域详解
Jul 18 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 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
thinkPHP交易详情查询功能详解
2016/12/02 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
python实现textrank关键词提取
2018/06/22 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Django中的静态文件管理过程解析
2019/08/01 Python
详解python中eval函数的作用
2019/10/22 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
python中安装django模块的方法
2020/03/12 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
关于python中remove的一些坑小结
2021/01/04 Python
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
银行实习的自我鉴定
2013/12/10 职场文书
《将心比心》教学反思
2014/04/08 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
《我是什么》教学反思
2016/02/16 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android