标签：
1、先看问题
当我们要对一个div/span元素获取焦点的时候，直接对$("#div1").focus()是不能实现效果的，比如下图：
当点击输入框进行输入后，在点击区域弹出选择地段的时候，input输入框并没有失去焦点(或者说区域的div没有获得焦点)，就出现了键盘显示在弹层的上面导致无法选择的bug
解决办法有两个：
a:循环所有的input等可以获取焦点的元素，让他们失去焦点(blur);
b:点击区域选择地段的时候让div获取焦点，从而解决input不失焦的问题：
在这里对于普通的div/span等元素节点是不能直接获取焦点的，需要用到一个属性tabindex
2、关于tabindex的科普
如果试图触发div标签绑定的onfocus事件和onblur事件，需要为该标签添加tabindex属性。
tabindex属性其实指定了点击计算机“Tab”键时光标移动的顺序，在点击计算机“Tab”键时tabindex属性值越小（最小为0）其所在的标签越先得到焦点
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>04</title> </head> <body> <input type="text" id="text1"> <input type="text" id="text2"> <input type="text" id="text3"> <div>按钮</div> </body> </html>
运行上面的代码点击计算机“Tab”键，这是你会发现input控件获取了焦点；input控件可以直接触发onfocus事件和onblur事件，但div不行
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>test</title> </head> <body> <input type="text" id="text1" tabindex = "3"> <input type="text" id="text2" tabindex = "2"> <input type="text" id="text3" tabindex = "1"> </body> </html>
运行上面的代码点击计算机“Tab”键，input会从右到左依次获取焦点
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>test</title> </head> <body> <input type="text" id="text1" tabindex = "1"> <input type="text" id="text2" tabindex = "2"> <input type="text" id="text3" tabindex = "3"> </body> </html>
运行上面的代码点击计算机“Tab”键，input会从左到右依次获取焦点
tabindex默认的会使用在以下元素（就是说默认可以获取焦点的元素）：A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.这些元素不设置tabindex都可以获取焦点，其他元素需要设置tabindex才能获取到焦点，其中tabindex得知越小在tab键切换的时候就会首先聚焦
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>04</title> </head> <body> <input type="text" id="text1"> <input type="text" id="text2"> <input type="text" id="text3"> <div tabindex="0">按钮</div> </body> </html>
运行上面的代码div就会获取焦点，当开始的时候焦点在input里面输入的时候，当点击div，原input就会失焦而div也就获取到了焦点，问题自然就解决了
div/span等获取焦点问题(tabindex属性的简单理解)
标签：
原文地址：http://www.cnblogs.com/cdwp8/p/4309960.html
