详细总结Javascript中的焦点管理


Posted in Javascript onSeptember 17, 2016

焦点元素

到底哪些元素可以获得焦点呢?默认情况下,只有表单元素可以获得焦点。因为只有表单元素可以交互

<input type="text" value="223">

让非表单元素获得焦点也是有办法的,先将tabIndex属性设置为-1,再调用focus()方法

<div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
<button id="btn">div元素获得焦点</button>
<script>
btn.onclick = function(){
 test.tabIndex = -1;
 test.focus(); 
}
test.onfocus = function(){
 this.style.background = 'pink';
}
</script>

activeElement

document.activeElement属性用于管理DOM焦点,保存着当前获得焦点的元素

[注意]该属性IE浏览器不支持

<div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
<button id="btn">div元素获得焦点</button>
<script>
console.log(document.activeElement);//<body>
btn.onclick = function(){
 console.log(document.activeElement);//<button>
 test.tabIndex = -1;
 test.focus(); 
 console.log(document.activeElement);//<div>
}
</script>

获得焦点

元素获得焦点的方式有4种,包括页面加载、用户输入(按tab键)、focus()方法和autofocus属性

【1】页面加载

默认情况下,文档刚刚加载完成时,document.activeElement中保存的是body元素的引用。文档加载期间,document.activeElement的值为null

<script>
console.log(document.activeElement);//null
</script>
<body>
<script>
console.log(document.activeElement);//<body>
</script>
</body>

【2】用户输入(按tab键)

用户通常可以使用tab键移动焦点,使用空格键激活焦点。比如,如果焦点在一个链接上,此时按一下空格键,就会跳转到该链接

说到tab键,就不能不提到tabindex属性。tabindex属性用来指定当前HTML元素节点是否被tab键遍历,以及遍历的优先级

1、如果tabindex=-1,tab键跳过当前元素

2、如果tabindex=0,表示tab键将遍历当前元素。如果一个元素没有设置tabindex,默认值就是0

3、如果tabindex大于0,表示tab键优先遍历。值越大,就表示优先级越小

下列代码中,使用tab键时,button获得焦点的顺序是2、5、1、3

<div id="box">
 <button tabindex= "3">1</button>
 <button tabindex= "1">2</button>
 <button tabindex= "0">3</button>
 <button tabindex= "-1">4</button>
 <button tabindex= "2">5</button> 
</div>
<script>
box.onkeyup = function(){
 document.activeElement.style.background = 'pink';
}
</script>

【3】focus()

focus()方法用于将浏览器的焦点设置到表单字段,即激活表单字段,使其可以响应键盘事件

[注意]前面介绍过,若非表单元素,设置为tabIndex为-1,也可以获取焦点

<span id="test1" style="height:30px;width:100px;">span</span>
<input id="test2" value="input">
<button id="btn1">span元素获得焦点</button>
<button id="btn2">input元素获得焦点</button>
<script>
btn1.onclick = function(){test1.tabIndex=-1;test1.focus();}
btn2.onclick = function(){test2.focus();}
</script>

【4】autofocus

HTML5表单字段新增了一个autofocus属性,只要设置这个属性, 不用javascript就能自动把焦点移动到相应字段

[注意]该属性只能用于表单元素,普通元素即使设置tabIndex=”-1″也不生效

<input autofocus value="abc">

hasFocus()

document.hasFocus()方法返回一个布尔值,表示当前文档之中是否有元素被激活或获得焦点。通过检测文档是否获得了焦点,可以知道是不是正在与页面交互

console.log(document.hasFocus());//true
//在两秒钟内点击其他标签页,使焦点离开当前页面
setTimeout(function(){
 console.log(document.hasFocus());//false
},2000);

失去焦点

如果使用javascript来使元素失去焦点,那么就要使用blur()方法

blur()方法的作用是从元素中移走焦点。在调用blur()方法时,并不会把焦点转移到某个特定的元素上;仅仅是将焦点从调用这个方法的元素上面移走而已

<input id="test" type="text" value="123">
<button id="btn1">input元素获得焦点</button>
<button id="btn2">input元素失去焦点</button>
<script>
btn1.onclick = function(){test.focus();}
btn2.onclick = function(){test.blur();}
</script>

焦点事件

焦点事件会在页面获得或失去焦点时触发。利用这些事件并与document.hasFocus()方法及 document.activeElement属性配合,可以知晓用户在页面上的行踪

焦点事件共包括下面4个

1、blur

blur事件在元素失去焦点时触发。这个事件不会冒泡

2、focus

focus事件在元素获得焦点时触发。这个事件不会冒泡

3、focusin

focusin事件在元素获得焦点时触发。这个事件与focus事件等价,但它冒泡

4、focusout

focusour事件在元素失去焦点时触发。这个事件与blur事件等价,但它冒泡

[注意]关于focusin和focusout事件,除了IE浏览器支持DOM0级事件处理程序,其他浏览器都只支持DOM2级事件处理程序

<div id="box"style="display:inline-block;padding:25px;background-color:lightgreen;">
 <div id="boxIn" style="height: 50px;width: 50px;background-color:pink;">123</div>
</div>
<button id="btn1">内容为123的div元素获取焦点</button>
<button id="btn2">内容为123的div元素失去焦点</button>
<button id="reset">还原</button>
<script>
reset.onclick = function(){history.go();}
//focus()方法
btn1.onclick = function(){
 boxIn.tabIndex= -1;
 boxIn.focus();
}
//blur()方法
btn2.onclick = function(){
 boxIn.blur();
}
//focusin事件
if(boxIn.addEventListener){
 boxIn.addEventListener('focusin',handler) 
}else{
 boxIn.onfocusin = handler;
}
function handler(){
 this.style.backgroundColor ='lightblue';
}
if(box.addEventListener){
 box.addEventListener('focusin',handler) 
}else{
 box.onfocusin = handler;
} 
//blur事件
function fnBlur(){
 this.style.backgroundColor = 'orange';
}
boxIn.onblur = fnBlur;
box.onblur = fnBlur;
</script>

由运行结果可知,focusin事件可冒泡;而blur事件不可冒泡 

焦点事件常用于表单展示及验证

比如,获取焦点时,修改背景颜色;失去焦点时,还原背景颜色并验证

<div id="box">
 <input id="input1" type="text" placeholder="只可以输入数字">
 <input id="input2" type="text" placeholder="只可以输入汉字"> 
 <span id="tips"></span>
</div>
<script>
if(box.addEventListener){
 box.addEventListener('focusin',fnIn);
 box.addEventListener('focusout',fnOut);
}else{
 box.onfocusin = fnIn;
 box.onfocusout = fnOut;
}
function fnIn(e){
 e = e || event;
 var target = e.target || e.srcElement;
 target.style.backgroundColor = 'lightgreen';
}
function fnOut(e){
 e = e || event;
 var target = e.target || e.srcElement;
 target.style.backgroundColor = 'initial';
 //如果是验证数字的文本框
 if(target === input1){
 if(!/^\d*$/.test(target.value.trim())){
 target.focus();
 tips.innerHTML = '只能输入数字,请重新输入'
 setTimeout(function(){
 tips.innerHTML = ''
 },500);
 }
 }
 //如果是验证汉字的文本框
 if(target === input2){
 if(!/^[\u4e00-\u9fa5]*$/.test(target.value.trim())){
 target.focus();
 tips.innerHTML = '只能输入汉字,请重新输入'
 setTimeout(function(){
 tips.innerHTML = ''
 },500);
 }
 } 
}
</script>

总结

以上就是为大家总结Javascript中焦点管理的全部内容,这篇文章介绍的很详细,对大家的学习和工作具有一定的参考借鉴价值,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
通过jquery实现tab标签浏览效果
Feb 20 Javascript
JavaScript中的Location地址对象
Jan 16 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
js变量提升深入理解
Sep 16 #Javascript
再谈javascript常见错误及解决方法
Sep 16 #Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 #Javascript
浅谈jQuery效果函数
Sep 16 #Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 #Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 #Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 #Javascript
You might like
PHP 实现explort() 功能的详解
2013/06/20 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
javascript的push使用指南
2014/12/05 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
this关键字的含义
2015/04/08 面试题
校班主任推荐信范文
2013/12/03 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
化学专业自荐信
2014/05/28 职场文书
费用申请报告范文
2015/05/15 职场文书
辩护词格式
2015/05/22 职场文书
用JS创建一个录屏功能
2021/11/11 Javascript