HTML-ссылка не получает контур фокуса при получении фокуса, если текстовая область не была явно сфокусирована ⇐ Html

[Anonymous]

Пример 1. Для ссылки нет контура фокуса
У меня есть обработчик нажатия клавиши для . Когда вызывается обработчик, мне нужна ссылка (

Код: Выделить всё

[url=https://example.com/]example.com[/url]

Пример 2. Успешная схема фокуса для ссылки
Но в примере ниже, когда я ввожу что-то в , ссылка получает фокус через 1000 мс (1 секунду), и ссылка тоже получает контур.
Обратите внимание, что в этом примере уже имеет фокус через text.focus() в JavaScript. Поэтому, в отличие от примера 1, нам не нужно было щелкать по нему мышью.
Единственное различие между предыдущим примером и этим примером заключается в том, что в этом примере есть вызов text.focus(), которого нет в предыдущем примере.

Код: Выделить всё

let link
let text

function main() {
link = document.getElementById('link')
text = document.getElementById('text')
text.focus()
text.value = ''
text.addEventListener('keydown', keydown)
}

function keydown() {
setTimeout(handler, 1000)
}

function handler() {
console.log('text.value:', text.value)
link.focus()
}

window.addEventListener('load', main)

Код: Выделить всё

a:focus { color: green }

Код: Выделить всё

[url=https://example.com/]example.com[/url]

Вопрос
Почему ссылка НЕ ​​получает контур фокуса вокруг себя в первом примере и почему она получает контур фокуса во втором примере? Я не могу найти в спецификациях W3 ничего, что могло бы объяснить такое поведение. Можете ли вы объяснить такое поведение?

Подробнее здесь: https://stackoverflow.com/questions/797 ... a-has-been