这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
相信大家都知道焦点作为 javascript 中的一个重要功能,基本上和页面交互都离不开焦点。但却少有人对焦点管理系统地做总结归纳。本文就 javascript 中的焦点管理作详细介绍,有需要的朋友们可以参考借鉴。
焦点元素
到底哪些元素可以获得焦点呢?默认情况下,只有表单元素可以获得焦点。因为只有表单元素可以交互
- <input type="text" value="223">
让非表单元素获得焦点也是有办法的,先将
属性设置为 - 1,再调用
- tabIndex
方法
- 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
属性用于管理 DOM 焦点,保存着当前获得焦点的元素
- document.activeElement
[注意] 该属性 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】页面加载
默认情况下,文档刚刚加载完成时,
中保存的是 body 元素的引用。文档加载期间,
- document.activeElement
的值为 null
- document.activeElement
- <script>
- console.log(document.activeElement); //null
- </script>
- <body>
- <script>
- console.log(document.activeElement); //<body>
- </script>
- </body>
【2】用户输入 (按 tab 键)
用户通常可以使用 tab 键移动焦点,使用空格键激活焦点。比如,如果焦点在一个链接上,此时按一下空格键,就会跳转到该链接
说到 tab 键,就不能不提到
属性。
- tabindex
属性用来指定当前 html 元素节点是否被 tab 键遍历,以及遍历的优先级
- tabindex
1、如果
,tab 键跳过当前元素
- tabindex=-1
2、如果
,表示 tab 键将遍历当前元素。如果一个元素没有设置
- tabindex=0
,默认值就是 0
- tabindex
3、如果
大于 0,表示 tab 键优先遍历。值越大,就表示优先级越小
- tabindex
下列代码中,使用 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()
[注意] 前面介绍过,若非表单元素,设置为
为 - 1,也可以获取焦点
- tabIndex
- <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 表单字段新增了一个
属性,只要设置这个属性, 不用 javascript 就能自动把焦点移动到相应字段
- autofocus
[注意] 该属性只能用于表单元素,普通元素即使设置
也不生效
- 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
事件在元素失去焦点时触发。这个事件与 blur 事件等价,但它冒泡
- focusour
[注意] 关于 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 中焦点管理的全部内容,这篇文章介绍的很详细,对大家的学习和工作具有一定的参考借鉴价值,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0514/331834.html