-
Notifications
You must be signed in to change notification settings - Fork 59
/
Copy pathindex.html
56 lines (48 loc) · 2.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
是否还在为div不能绑定focus和blur事件而烦恼，那么来了解下tabindex属性吧。
<!--more-->
<h3>一、定义</h3>
tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）。
<h3>二、用法</h3>
语法：<element tabindex="number"> 默认值是0
W3C的规定，tabindex属性的范围在0到 32767之间。
tabindex中的值规定了我们按tab键时选中的顺序。顺序按照从1开始，从小到大，当存在相同值时，按照html文档中的顺序，当值是0时，他在所有设置了tabindex值的元素之后，当值是-1时，他将永远不会被tab键选中。例如：
<pre> <input type="text" value="a">
<input type="text" tabindex="0" value="b">
<input type="text" tabindex="3" value="c">
<input type="text" tabindex="-1" value="d">
<input type="text" value="e">
<input type="text" tabindex="2" value="f">
<input type="text" tabindex="2" value="g">
<input type="text" tabindex="1" value="h">
<input type="text" value="i"></pre>
部分input给了tabindex值，点击tab键，我们可以得到顺序：h->f->g->c->a->b->e->i，而d无法被tab键选中。
<h3>三、特殊用法</h3>
<pre><div id="box"></div>
document.getElementById('box').onfocus = function() {
console.log('focus');
};
document.getElementById('box').onblur = function() {
console.log('blur');
};</pre>
无论我们怎么点击div或者使他失去焦点，控制台上都不会有任何打印，此时给div设置个tabindex属性为-1。
<pre><div id="box" tabindex="-1"></div></pre>
此时操作div，对应的focus和blur事件就可以触发了。
<strong>注：tabindex赋值其他值也是可以的，不过其他值时，该div会被tab键选中，不友好。（tab键常用来选择输入的）</strong>
当然，此时点击div时，会显示一个类似于边框的样式（其实是outline），这是用户默认的样式。
<img class="alignnone size-full wp-image-385" src="http://www.zhuyuntao.cn/wp-content/uploads/2017/06/tabindex1.jpg" alt="" width="553" height="100" />
我们可以设置个初始化的样式覆盖掉他。
<pre>div:focus {
outline: none;
}</pre>
这样，div的聚焦和失焦的事件就可以正常使用了。
</body>
</html>