使用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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 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会员权限控制实现原理分析
2011/05/29 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
销售人员自我评价怎么写
2013/09/19 职场文书
公司财务自我评价分享
2013/12/17 职场文书
精彩自我鉴定
2014/01/16 职场文书
班级口号大全
2014/06/09 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
红白喜事主持词
2015/07/06 职场文书
医院保洁员管理制度
2015/08/05 职场文书