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

女爷i 2022-04-25 04:28 204阅读 1赞

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

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

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

--------------------

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

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmd6ZWhhbw_size_16_color_FFFFFF_t_70][]

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

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

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

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

先看看W3school（[http://www.w3school.com.cn/jquery/event\_focus.asp][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][http_www.w3school.com.cn_tags_att_standard_tabindex.asp]）对此属性的介绍：

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmd6ZWhhbw_size_16_color_FFFFFF_t_70 1][]

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

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

tabindex=-1

--------------------

以上。

[https_www.runoob.com_jsref_met-html-focus.html]: https://www.runoob.com/jsref/met-html-focus.html
[https_www.runoob.com_html_html-forms.html]: https://www.runoob.com/html/html-forms.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmd6ZWhhbw_size_16_color_FFFFFF_t_70]: /images/20220210/067bb7d4dfe3428bb527ce8ef0a300df.png
[http_www.w3school.com.cn_jquery_event_focus.asp]: http://www.w3school.com.cn/jquery/event_focus.asp
[http_www.w3school.com.cn_tags_att_standard_tabindex.asp]: http://www.w3school.com.cn/tags/att_standard_tabindex.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmd6ZWhhbw_size_16_color_FFFFFF_t_70 1]: /images/20220210/181ec3f2195d47efbab4b6e61574c2fb.png