本文主要是介绍非表单元素如何使用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以上。
这篇关于非表单元素如何使用focus焦点事件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
