span、div、li 等获取焦点问题

最新推荐文章于 2024-07-03 02:59:28 发布

iBaoxing

最新推荐文章于 2024-07-03 02:59:28 发布

阅读量7.3k

点赞数 2

分类专栏： java

本文链接：https://blog.csdn.net/zbx931197485/article/details/79468670

版权

java 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

对于普通的div/span/li等元素节点是不能直接获取焦点的，需要用到一个属性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在谷歌浏览器中会出现一个浅蓝色的“框”，在IE浏览器中会出现一个由虚线构成的“框”，这个边框大多数时候我们是不需要的，那么怎么解决这个问题呢？解决出现浅蓝“框”只需要向div标签的样式表中添加“outline:0;”样式即可，解决出现由虚线构成的“框”只需要向div标签中添加“hidefocus=”true””属性和属性值即可；

代码7

<html>  
    <head>  
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />  
        <title>07</title>  
    </head>  
    <body>  
        <div tabindex="0" hidefocus="true" onfocus="javascript:alert('得到焦点!');" style="outline:0;"> </div>  
    </body>  
</html>

说明：使用IE、火狐或Opera浏览器运行代码7的代码，让div获取焦点（通过鼠标点击div域即可）你会发现出现了一个对话框，点击“确定”按钮，该对话框取消，但是在谷歌或Safari浏览器运行代码7的代码，让div获取焦点（通过鼠标点击div域即可）点击出现的对话框中的“确定”按钮，你会发现该对话框会一次又一次的出现，这不是我们想要看到的，为什么会出现这种情况，怎么解决这种情况呢？呵呵呵，我也正在为此而探索，但到现在也没有找到一个有效的办法，最后迫不得已使用了onclick事件，div支持onclick事件的而且不需要添加原本不属于div的tabindex属性。

iBaoxing

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
2
评论
span、div、li 等获取焦点问题

对于普通的div/span/li等元素节点是不能直接获取焦点的，需要用到一个属性tabindex2、关于tabindex的科普如果试图触发div标签绑定的onfocus事件和onblur事件，需要为该标签添加tabindex属性。tabindex属性其实指定了点击计算机“Tab”键时光标移动的顺序，在点击计算机“Tab”键时tabindex属性值越小（最小为0）其所在的标签越先得到焦点...
复制链接

扫一扫