Активная кнопка клавиатуры FireFox

Question

Наличие интерфейса, который должен быть дружественным к клавиатуре.Он имеет различные элементы управления для кнопок и т. Д.

Проблема заключается в том, что при нажатии кнопки на клавиатуре кнопка не получает статус :active.У меня есть сильный стиль, чтобы показать, что он получает :focus - но активный статус срабатывает только тогда, когда вы используете мышь и щелкаете основной кнопкой.

Это делает вещи очень недружелюбными для пользователя.Похоже, что кнопка не активирована.Страница заморожена или тому подобное.Один риск, который пользователи нажимают несколько раз, ожидая визуальной обратной связи.

---

Из того, что я прочитал в MDN, выглядит так, что это функция в спецификации CSS3:

Примечание: В системах с многокнопочными мышами CSS3 указывает, что псевдокласс: active должен применяться только к основной кнопке;на правосторонних мышах это обычно самая левая кнопка.

https://developer.mozilla.org/en-US/docs/Web/CSS/:active

---

Поскольку это пользовательский интерфейс на основе JavaScript, я попытался решить эту проблему с помощью JSдля события click:

Добавьте и удалите класс .activated.

Это не работает, поскольку страница не отображается повторно.Чтобы исправить это без использования setTimeout(), я пробовал что-то вроде этого:

https://css -tricks.com / restart-css-animation / # article-header-id-0

element.classList.add('activated');
void element.offsetWidth;                // Trigger reflow
element.classList.remove('activated');

Нет эффекта.

Я попытался добавить класс, удалить элемент, вставить новый с классом и удалить класс.Нет эффекта.

Используется dataset-active=1 и CSS для этого.Нет эффекта.Та же проблема, что и при добавлении и удалении класса.

И некоторые другие вещи.

Я также пытался использовать setTimeout(), но это несколько глючит.Особенно если использовать клавишу Enter (для запуска нескольких нажатий).

В конце я также попытался прослушивать статусы нажатия клавиш, нажатия клавиш и т. Д., Если он был введен, пробел или щелчок мыши и т. Д. Но это быстро получилосьочень грязно.

---

Есть ли хитрый трюк для этого, который я пропускаю?Решение, которое не слишком сложное.

---

Пример кода

button:focus {
  outline: 1px solid blue;
}
button:active {
  outline: 4px solid red;
}

<button onclick="counter.value = ++counter.value;">Button</button>
<input id="counter" value="0">

Answer 1

Как насчет этого: Добавление атрибута данных, содержащего связанный код клавиши, к кнопке. При нажатии клавиши назначается класс active, а триггеры click() и focus(). Когда ключ отпущен, класс active не будет назначен.

 
document.onkeydown = function (evt)
{
    let btn = document.querySelector ('[data-key=' + CSS.escape (evt.keyCode) + ']');
    if (btn)
    {
        btn.classList.add ('active');
        btn.click();
        btn.focus();
    }
}

document.onkeyup = function (evt)
{
    let btn = document.querySelector ('[data-key=' + CSS.escape (evt.keyCode) + ']');
    if (btn)
    {
        btn.classList.remove ('active');
    }
}

    button:focus {
  outline: 1px solid blue;
}

button.active, button:active {
  outline: 4px solid red;
}

<button data-key="32" onclick="console.log(1);">Button 1 [space]</button>
<button data-key="16" onclick="console.log(2);">Button 2 [shift]</button>
<button data-key="13" onclick="console.log(3);">Button 3 [enter]</button>

В качестве альтернативы вы можете взглянуть на атрибут accesskey .