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>

运行上面的代码div就会获取焦点,当开始的时候焦点在input里面输入的时候,当点击div,原input就会失焦而div也就获取到了焦点,问题自然就解决了

你可能感兴趣的:(div/span等获取焦点问题(tabindex属性的简单理解))