html中div获取焦点，去掉input div等获取焦点时候的边框

时间：2022-06-02 17:57:35

经测试只有在IE chrome才会在获取焦点时有边框

使用CSS

div{
    outline:none;
}

DIV焦点事件详解 --【focus和tabIndex】​

摘自：http://my.oschina.net/jgy/blog/131970

添加 tabindex='-1' 属性；

默认：获取不到焦点事件（blur）

<div class="wl-product" id="wl-product"></div>

可以获取焦点事件（blur）

<div class="wl-product" id="wl-product" tabindex='-1'></div>

首先看看w3c关于onfocus的部分：
The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. 
This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON. 
当元素通过指定（点击）或tab导航（Tabbing navigation）获得焦点，onfocus事件就会触发。
该属性会使用在以下元素（就是说默认可以获取焦点的元素）：A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.

 div, frameSet, span, table, td.只有设置tableindex才能获取焦点，但

IE默认能获取焦点但不能tab导航

 

不同tabIndex值在tab order（Tabbing navigation）中的情况：
Objects with a positive tabIndex are selected in increasing iIndex order and in source order to resolve duplicates.
Objects with an tabIndex of zero are selected in source order. 
Objects with a negative tabIndex are omitted from the tabbing order.
tabIndex值是正数的对象根据递增的值顺序和代码中的位置顺序来被选择
tabIndex值是0的对象根据在代码中的位置顺序被选择
tabIndex值是负数的对象会被忽略

 

标签：

相关文章