使用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读取RSS数据
Jan 20 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
AngularJS语法详解
Jan 23 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
关于vue组件事件属性穿透详解
Oct 28 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 XML操作类DOMDocument
2009/12/16 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
python opencv实现简易画图板
2020/08/27 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
专升本自我鉴定
2013/10/10 职场文书
工作人员思想汇报
2014/01/09 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle