使用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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
学习ExtJS border布局
Oct 08 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
详解vue的双向绑定原理及实现
May 05 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
function.inc.php超越php
2006/12/09 PHP
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
JQuery下拉框应用示例介绍
2014/04/23 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
Python常见数据结构详解
2014/07/24 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
Python实现随机漫步功能
2018/07/09 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
Python 爬虫性能相关总结
2020/08/03 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
抽象方法、抽象类怎样声明
2014/10/25 面试题
简历自我评价怎么写呢?
2014/01/06 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
劲霸男装广告词
2014/03/21 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
校园运动会广播稿
2014/10/06 职场文书
golang slice元素去重操作
2021/04/30 Golang
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python