div获取焦点

来源：互联网发布：一个简单的python程序编辑：程序博客网时间：2024/05/22 08:06

div/span等获取焦点问题(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></html>

阅读全文

0 0