Почему нажатие клавиши Enter на кнопке не вызывает: активное состояние в Chrome? - PullRequest
Новая
       53

Почему нажатие клавиши Enter на кнопке не вызывает: активное состояние в Chrome?

1 голос
/ 18 февраля 2020

Проверьте следующий фрагмент в текущем Chrome (80): 

foo.addEventListener('click', () => {
  console.log('button activated');
})
button:active {
  background-color: yellow;
}
<button type="button" id="foo">Activate me using Click, Enter, Space</button>

Chrome применяет стили button:active, когда кнопка нажата (вправо или влево) или активирована с помощью Пробел , , но не при активации с помощью Ввод .

Firefox применяет стили button:active только при нажатии (только левая кнопка мыши) кнопка.

Кто-нибудь знает

  1. , как это должно работать , а
  2. как мне получить кнопку для отображения button:active независимо от того, какой из методов активации используется?

Я бы очень предпочел решение, основанное на CSS. Добавление / удаление класс с использованием ключевых слушателей был бы очень уродливым решением и не входит в сферу этого вопроса.

Edit

Должен быть или, по крайней мере, должен быть стандартный способ дать пользователь активирует кнопку с помощью Введите визуальную обратную связь о своем действии. Это поведение где-то не указано? Если бы это было так, я мог бы поднять его как проблему на баг-трекере Mozilla, а также на трекере проблем Chromium.

1 Ответ

2 голосов
/ 18 февраля 2020

Спецификация кажется довольно ясной по этому поводу:

Псевдокласс :active применяется , пока элемент активируется пользователем . Например, , между моментами, когда пользователь нажимает кнопку мыши и отпускает ее. В системах с несколькими кнопками мыши :active применяется только к основной или основной кнопке активации (обычно это «левая» кнопка мыши) и к любым ее псевдонимам.

https://drafts.csswg.org/selectors-3/#sel -актив

Таким образом, явно не упоминает упоминание об активации элемента с помощью клавиатуры, но оно заявляет

[...] когда элемент активируется пользователем [...]

Поскольку кнопка явно активируется пользователем , когда он выдает Введите или Пробел , оба Firefox и Chrome кажутся явно нарушающими спецификацию c здесь.

Кроме того, Chrome также применяется :active когда щелчок правой кнопкой мыши на кнопку (что явно указано в спецификации c должно не иметь место).

Будет ли проблема в трекере CSSWG для того, чтобы сделать эту часть spe c более явной. Вот оно: https://github.com/w3c/csswg-drafts/issues/4787

...