Контур фокуса не виден в Chrome при использовании обработчика клавиш для управления фокусом - PullRequest
Новая
       50

Контур фокуса не виден в Chrome при использовании обработчика клавиш для управления фокусом

0 голосов
/ 11 июня 2019

У меня есть <input type="text" />.

Когда я Shift + Tab из текстового поля, я хочу сосредоточиться на li > a. Я не могу полагаться на собственное поведение табуляции в этом случае, потому что у меня есть элемент привязки между <input /> и целью <a />, на который я не хочу фокусироваться.

Таким образом, я добавляю слушателя нажатия клавиш, который заставляет сосредоточиться на <a />, который мне небезразличен.

Однако в Chrome, когда я фокусируюсь на <input /> и Shift + Tab от <input />, фокус переходит к последнему <a />, но контур невидим. Если я сделаю еще один Shift + Tab + Tab , чтобы вернуться на B, я теперь вижу схему. 

document.getElementById("f").addEventListener("keydown", (e) => {
  if (e.key === "Tab" && e.shiftKey) {
      e.preventDefault();
      document.querySelector("#list1 > li:last-child > a").focus();
  }
});
<ul id="list1">
  <li><a href="#">A</a></li>
  <li><a href="#">B</a></li>
</ul>

<a href="#" />
<input id="f" />

Если я удалю обработчик keydown и элемент привязки между текстовым полем и целевой привязкой, на которую я хочу сфокусироваться, контур фокуса отображается правильно.

Это известная ошибка Chrome, и есть ли обходные пути для этого? (С использованием Chrome 74)

Ответы [ 2 ]

1 голос
/ 11 июня 2019

Вы можете удалить e.preventDefault();, затем подождать несколько миллисекунд, прежде чем устанавливать фокус: 

document.getElementById("f").addEventListener("keydown", function (e) {
    if (e.key === "Tab" && e.shiftKey) {
        setTimeout(function() {
            document.querySelector("#list1 > li:last-child > a").focus();
        }, 10);
    }
});
<ul id="list1">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
</ul>

<a href="#" />
<input id="f" />
1 голос
/ 11 июня 2019

Вы можете предотвратить фокусировку другого якоря с помощью атрибута tabindex.Вот пример: 

<ul id="list1">
  <li><a href="#">A</a></li>
  <li><a href="#">B</a></li>
</ul>

<a href="#" tabindex="-1"/>
<input id="f" />

Это может работать не во всех браузерах.

...