Question

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

<!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>

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

此行为是Firefox独有的：这不会发生在IE，Safari或Chrome上。我怎样才能绕过这种行为，这对我来说听起来像是一个Firefox错误？我希望该标签可以跳过<div>，即使它有overflow-y: scroll。

Answer 1

使用the tabIndex attribute来控制 Tab 跳过的项目的顺序。像这样：

<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>

如何防止溢出的框：滚动从Firefox上的标签上偷取焦点？

1 个答案: