让div获取焦点

<div>在正常情况下是无法获得焦点的,而我们常用的blur()和focus()多是常用于<input>,对于<div>都是没有用的。
让一个<div>获取焦点,其解决方案如下:

增加:tabindex = "-1"
如:

<div class="icon-change" tabindex="-1" @blur="colorShow"></div>

然后继续写失焦和聚焦事件就好了 

TabIndex 属性:
1. html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。把控件的tabIndex属性设成1到32767的一个值,就可以把这个控件加入到TAB键的序列中。
2. 当浏览者使用TAB键在网页控件中移动时,将首先移动到具有最小tabIndex属性值的控件上,最后在具有最大tabIndex属性值的控件上结束移动。
3. 如果有两个控件的tabIndex属性相同,则以控件在html代码中出现的顺序为准。
4. 默认的tabIndex属性为 0,将排列在在所有指定tabIndex的控件之后。
5. 而若把tabIndex属性设为一个负值(如tabIndex="-1"),那么这个链接将被排除在TAB键的序列之外。
6. 注意:如果使用-1值时,onfocus与onblur事件仍被启动。

posted @ 2022-04-28 19:26  奥兰王子  阅读(466)  评论(0编辑  收藏  举报