divspan等获取焦点问题（tabindex属性的简单理解）
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>
input绑定onblur事件
</html>
运⾏上⾯的代码div就会获取焦点，当开始的时候焦点在input⾥⾯输⼊的时候，当点击div，原input就会失焦⽽div也就获取到了焦点，问题⾃然就解决了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。