给div元素添加blur() 事件或者focus()事件，tabindex，改变键盘上的 Tab 键在链接之间进行导航的顺序

本文主要是介绍给div元素添加blur() 事件或者focus()事件，tabindex，改变键盘上的 Tab 键在链接之间进行导航的顺序，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

给div元素添加blur() 事件或者focus()事件

话不多少上代码

<body><p onblur="b()" onfocus="f()" tabindex="2">获取焦点，失去焦点的事件</p>
</body>
<script>function f(){console.log('获取焦点')}function b(){console.log('失去获取焦点')}
</script>

如果我们不想让元素加上一个选中边框的样式可以添加css样式

 <style>p{resize: none;outline: none;}
</style>

这里最主要的就是tabinde这个属性，tabindex 全局属性指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航

tabinde还可以改变键盘上的 “Tab” 键在链接之间进行导航的顺序链接地址
它接受一个整数作为值，具有不同的结果，具体取决于整数的值：

tabindex=负值
(通常是tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用JS做页面小组件内部键盘导航的时候非常有用。
tabindex=“0” ，
表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的。
tabindex=正值，
表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前DOM中的先后顺序决定。

注：tabindex 的最大值不应超过 32767。如果没有指定，它的默认值为 -1。

这篇关于给div元素添加blur() 事件或者focus()事件，tabindex，改变键盘上的 Tab 键在链接之间进行导航的顺序的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！