焦点元素
到底哪些元素可以获得焦点呢？默认情况下，只有表单元素可以获得焦点。因为只有表单元素可以交互
<input type="text" value="666">`
那么如何让非表单元素也能获得焦点呢?
先将tabIndex属性设置为-1或者0(最好设置为0)，再调用focus()方法，这时该元素就获得该焦点了。
<canvas id="canvas_1"></canvas>
<script>
canvas_1.tabindex = -1;
canvas_1.focus();
</script>
-------------------------------
<canvas id="canvas_1" tabindex=-1></canvas>
<script>
canvas_1.focus();
</script>
activeElement
document.activeElement属性用于管理DOM焦点，保存着当前获得焦点的元素。
$\color{red}{注意: 该属性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>
既然上面使用了全局属性
tabindex，这里就介绍一下。
全局属性（global attributes）是所有元素都可以使用的属性。也就是说，你可以把全局属性，加在任意一个网页元素上面，不过有些属性对某些元素可能不产生意义。
全局属性tabindex
网页通常使用鼠标操作，但是某些情况下，用户可能希望使用键盘，或者只有键盘可以用。因此，浏览器允许使用 Tab 键，遍历网页元素。也就是说，只要不停按下 Tab 键，网页的焦点就会从一个元素转移到另一个元素，选定焦点元素以后，就可以进行下一步操作，比如按下回车键访问某个链接，或者直接在某个输入框输入文字。
这里就有一个问题，按下 Tab 键的时候，浏览器怎么知道跳到哪一个元素。HTML 提供了tabindex属性，解决这个问题。它的名字的含义，就是 Tab 的顺序（index）。
tabindex属性的值是一个整数，表示用户按下 Tab 键的时候，网页焦点转移的顺序。不同的属性值有不同的含义。
- 负整数：该元素可以获得焦点（比如使用 JavaScript 的
focus()方法），但不参与 Tab 键对网页元素的遍历。这个值通常是-1。 - 0：该元素参与 Tab 键的遍历，顺序由浏览器指定，通常是按照其在网页里面出现的位置。
- 正整数：网页元素按照从小到大的顺序（1、2、3、……），参与 Tab 键的遍历。如果多个元素的tabindex属性相同，则按照在网页源码里面出现的顺序遍历。
<p tabindex="0">这段文字可以获得焦点。</p>
上面代码中，<p>标签的tabindex为0，意味着该元素可以获得焦点，并且也可以被 Tab 键遍历，顺序由其在源码里面的位置决定。
一般来说，tabindex属性最好都设成0，按照自然顺序进行遍历，这样比较符合用户的预期，除非网页有特殊布局。如果网页所有元素都没有设置tabindex，那么只有那些默认可以遍历的元素（比如链接、输入框等）才能参与 Tab 键的遍历，顺序由其在源码的位置决定。因此实际上，只有那些无法获得焦点的元素（比如<span>、<div>）需要参与遍历，才有必要设置tabindex属性。
获取焦点
元素获得焦点的方式有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键遍历，以及遍历的优先级:
- 如果tabindex=-1，tab键跳过当前元素
- 如果tabindex=0，表示tab键将遍历当前元素。如果一个表单元素没有设置tabindex，默认值就是0。
- 如果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()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。
$\color{red}{注意:前面介绍过，若非表单元素，设置为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就能自动把焦点移动到相应字段。
$\color{red}{注意:该属性只能用于表单元素，普通元素即使设置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>
