使用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 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
兼容ie和firefox js关闭代码
Dec 11 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
微信小程序之购物车功能
Sep 23 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 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在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
python django 访问静态文件出现404或500错误
2017/01/20 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python将图片转换为字符画的方法
2020/06/16 Python
python 异或加密字符串的实例
2018/10/14 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
校园十大歌手策划书
2014/02/01 职场文书
学员自我鉴定
2014/03/19 职场文书
天网工程实施方案
2014/03/26 职场文书
财产保全担保书
2015/01/20 职场文书
2016党员党课心得体会
2016/01/07 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python