Как сделать так, чтобы окно с переполнением-y: scroll не крало фокус на вкладке в Firefox? - PullRequest
Новая
       17

Как сделать так, чтобы окно с переполнением-y: scroll не крало фокус на вкладке в Firefox?

2 голосов
/ 08 сентября 2010

Рассмотрим страницу со следующим кодом: 

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

1 Ответ

2 голосов
/ 08 сентября 2010

Используйте атрибут 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>
...