详细总结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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
JavaScript手机振动API
Jun 11 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 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读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
jquery json 实例代码
2010/12/02 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
在Python中处理时间之clock()方法的使用
2015/05/22 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
Python3处理HTTP请求的实例
2018/05/10 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
Python列表对象实现原理详解
2019/07/01 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
汽车维修工岗位职责
2014/02/12 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
某某同志考察材料
2014/05/28 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
党章培训心得体会
2014/09/04 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android
小程序实现侧滑删除功能
2022/06/25 Javascript