非表单元素如何使用focus焦点事件

在前端开发中，常用的焦点事件有focus和blur。

来看看在菜鸟教程（https://www.runoob.com/jsref/met-html-focus.html）中的介绍：

• focus() 方法用于为元素设置焦点（如果可以设置）。
• 提示：使用 blur()方法来移除元素焦点。

菜鸟教程里说“如果可以设置”，那么哪样的元素可以设置，哪样的元素又不可以设置呢？对于不可以设置焦点事件的元素，如何让它也能够使用焦点事件？One by one。

哪些元素可以设置focus/blur

默认表单元素可以设置焦点事件。那么表单元素都具体包含哪些呢？

继续去菜鸟教程（https://www.runoob.com/html/html-forms.html）里找答案：

• 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

当然也少不了HTML5新增的表单元素，汇总如下图：

哪些元素不可以设置focus/blur

除上图所有表单元素之外。

非表单元素如何设置focus/blur

给非表单元素添加tabindex属性即可。

先看看W3school（http://www.w3school.com.cn/jquery/event_focus.asp）对focus事件的定义和用法：

• 当元素获得焦点时，发生 focus 事件。
• 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
• focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。

所以，要想让元素获得焦点， 可以鼠标点击，也可以使用tab键通过tabindex数值定位到。

再来看看W3school（http://www.w3school.com.cn/tags/att_standard_tabindex.asp）对此属性的介绍：

• tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）。

那么表单元素和tab键有什么关联？有时候我们浏览一个网页，特别是填写表单的页面，误触或按到tab键，发现焦点自动跑到表单元素，如下图：

当用户填写页面上那么多表单项时，不用我们手动点击鼠标一个个切换填写下一个表单项，而直接按下tab键以快速高效完成表单的填写。这就是（当 tab 键用于导航时）的意思。如此人性化的设计或网页规范标准大大节省了用户的时间，也给用户更佳的UI体验。 （ps：不仅表单元素，<a>元素也有tab导航的效果）

所以，可以理解为表单元素默认在创建后，默认会被赋予tabindex属性，按照文档顺序从上到下，值从1开始到最后。而非表单元素，若想使用焦点，也要拥有tabindex属性，为了不影响页面其他表单元素的tab导航切换操作顺序，一般给非表单元素设置属性：

tabindex=-1

以上。