如何防止带有溢出-y 的框：滚动窃取 Firefox 上选项卡的焦点？

Question

如何防止带有溢出-y 的框：滚动窃取 Firefox 上选项卡的焦点？

ave*_*net 5 css firefox accessibility tabbing

考虑一个包含以下代码的页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            .steal-focus { overflow-y: scroll }
        </style>
    </head>
    <body>
        <form action="/">
            <input type="text" value="First">
            <div class="steal-focus">Content</div>
            <input type="text" value="Second">
        </form>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

在 Firefox 上加载此页面。
第一次点击标签：焦点转到第一个文本字段。
再次点击选项卡：焦点转到<div>而不是第二个文本字段，因为overflow-y: scroll.

这种行为是 Firefox 独有的：IE、Safari 或 Chrome 不会发生这种情况。我怎样才能解决这个对我来说听起来像是 Firefox 错误的行为？我希望选项卡跳过，<div>即使它有一个overflow-y: scroll.

Answer 1

Mat*_*all 2

使用属性tabIndexTab来控制跳过的项目的顺序。像这样：

<body>
    <form action="/">
        <input type="text" value="First" tabIndex="1">
        <div class="steal-focus">Content</div>
        <input type="text" value="Second" tabIndex="2">
    </form>
</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，9 月前
查看次数：	2449 次
最近记录：	15 年，9 月前