让HTML标签、DIV、SPAN拥有onfocus和onblur，聚焦和失焦

最新推荐文章于 2025-05-16 11:41:12 发布

原创最新推荐文章于 2025-05-16 11:41:12 发布 · 9.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#HTML标签 #DIV #SPAN #onfocus和onblur #聚焦和失焦

WEB前端专栏收录该内容

114 篇文章

订阅专栏

本文介绍如何使HTML中的DIV等普通标签获得与INPUT和A标签类似的onfocus和onblur事件功能。通过设置tabindex属性，可以让这些标签支持键盘导航，并通过附加onfocus和onblur事件监听器实现聚焦与失焦的效果。

DIV和其他普通标签是不具有onfocus和onblur事件的。
INPUT和A标签为什么拥有？而DIV和SPAN等普通标签却没有？
有时候我们习惯性用键盘的TAB来移动光标，仔细看你会发现，光标只在INPUT和A上跳转。
因为INPUT和A标签具备TAB属性。
我们只需要给DIV或者SPAN等普通标签创建TAB，这些普通标签就拥有了TAB属性。
以DIV为例：
让DIV拥有TAB并具有onfucus和onblur属性。

给元素创建TAB属性：tabindex=参数(这里和z-index类似，计算TAB起点)。

<div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur='alert("失去焦点");' style="border:1px solid #ccc;width:200px;height:200px;outline=0;">让HTML标签、DIV、SPAN拥有onfocus和onblur，聚焦和失焦</div>

注：定义TAB属性后，元素是默认会加上焦点虚线的，那么在IE中可以通过hidefocus="true"去除！其他浏览器通过outline=0进行去除！