web技术学习笔记和分享

tabindex

tabindex 全局属性指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用 Tab 键，因此得名）。

拥有 tabindex,可以使普通 dom 元素得到 focus 和 blur 事件，方便我们处理 active 的事件

它接受一个整数作为值，具有不同的结果，具体取决于整数的值：

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

如果我们在 <div> 上设置了 tabindex 属性，它的子元素内容不能使用箭头键来滚动，除非我们在内容上也设置 tabindex

Demo

Click anywhere in this pane, then try tabbing through the elements.

First in tab order:

Tabbable due to tabindex.

Not tabbable: no tabindex.

Third in tab order:

<template>
  <div>
    <p>Click anywhere in this pane, then try tabbing through the elements.</p>
    <label>First in tab order:<input type="text" /></label>
    <div id="tabindex" @focus.once="onfocus" @blur.once="onblur" tabindex="0">
      Tabbable due to tabindex.
    </div>
    <div>Not tabbable: no tabindex.</div>
    <label>Third in tab order:<input type="text" /></label>
  </div>
</template>

<script setup>

function onfocus() {
  alert("this div is focus");
}
function onblur() {
  alert("this div is blur");
}
</script>

<style scoped>
input{
    border: 1px solid #ccc;
}
p {
  font-style: italic;
  font-weight: bold;
}
div,
label {
  display: block;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

div:focus {
  font-weight: bold;
}
</style>

tabindex ​

tabindex