使用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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
js编写简单的计时器功能
Jul 15 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 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版(1)
2006/10/09 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
Python3基础之基本数据类型概述
2014/08/13 Python
python协程用法实例分析
2015/06/04 Python
python 中的int()函数怎么用
2017/10/17 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
python模块导入的方法
2019/10/24 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
初中校园之声广播稿
2014/01/15 职场文书
同学聚会主持词
2014/03/18 职场文书
师范生求职自荐信
2014/06/14 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers