• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • tabindex

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

    示例

    <p>Click anywhere in this pane, then try tabbing through the elements.</p>
    
    <label>First in tab order:<input type="text"></label>
    
    <div tabindex="0">Tabbable due to tabindex.</div>
    
    <div>Not tabbable: no tabindex.</div>
    
    <label>Third in tab order:<input type="text"></label>
    
    <style>
    .output {
        font: .9rem 'Fira Sans', sans-serif;
    }
    
    p {
        font-style: italic;
    }
    
    div,
    label {
        display: block;
        letter-spacing: .5px;
        margin-bottom: 1rem;
    }
    
    div:focus {
        font-weight: bold;
    }
    
    </style>
    

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

    Tabbable due to tabindex.
    Not tabbable: no tabindex.

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

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

    根据键盘序列导航的顺序,值为0、非法值、或者没有tabindex值的元素应该放置在tabindex值为正值的元素后面。

    如果我们在<div>上设置了tabindex属性,它的子元素内容不能使用箭头键来滚动,除非我们在内容上也设置tabindex。查看这篇 fiddle 来理解 tabindex 的滚动影响。

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

    实例带有指定的 tab 键导航顺序的链接:

    <a href="https://www.lanmper.cn/" tabindex="2">w3cschool</a><br />
    <a href="https://www.lanmper.cn/" tabindex="1">google</a><br />
    <a href="http://www.microsoft.com/" tabindex="3">microsoft</a>

    浏览器支持

    所有主流浏览器都支持tabindex属性

    定义和用法

    tabindex 属性规定当使用"tab"键进行导航时元素的顺序。

    HTML 4.01 与 HTML5之间的差异

    在 HTML5 中, tabindex 属性可用于任何的 HTML 元素(它会验证任何HTML元素。但不一定是有用)。

    在 HTML 4.01中, tabindex 属性可用于:<a><area><button><input><object><select>、和<textarea>

    语法

    <element tabindex="number">

    属性值

    描述
    number规定元素的 tab 键控制顺序(1 是第一)。

    上篇:style

    下篇:itemtype