5

考虑具有以下代码的页面：

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

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

4

1 回答 1

2

使用该tabIndex属性来控制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>
于 2010-09-08T18:48:47.393 回答