使用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 相关文章推荐
jQuery 表格工具集
Apr 25 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
JS中常用的正则表达式
Sep 29 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
vue的路由映射问题及解决方案
Oct 14 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
php生成rss类用法实例
2015/04/14 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
全面理解Python中self的用法
2016/06/04 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
Linux下python制作名片示例
2018/07/20 Python
Django之模型层多表操作的实现
2019/01/08 Python
通过shell+python实现企业微信预警
2019/03/07 Python
Python如何重新加载模块
2020/07/29 Python
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
实习教师个人的自我评价
2013/11/08 职场文书
业务员岗位职责范本
2013/12/15 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
踏青活动策划方案
2014/08/19 职场文书
运动会通讯稿50字
2015/07/20 职场文书
商业计划书之服装
2019/09/09 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android