Удалить контур на: активный &: фокус, но не на: только фокус

Question

Я использую таблицы данных из беглого комплекта и нумерации страниц при нажатии (:active) выделяется с помощью:

box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);

Я хочу, чтобы это ушло, но только при нажатии. Я хочу, чтобы эффект работал только для :focus сделано с клавиатуры, TAB ключ. Я не думаю, что это возможно только с CSS. Если это так, это круто. Если нет, то решение javascript / jquery является приемлемым.

Вот упрощенный пример кода:

.pagination {
  padding: 20px;
}

.pagination a {
  padding: 10px;
}

.pagination a:focus {
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.pagination a:active {
  border: 1px solid black;
}

<div class="pagination">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
</div>

использование TAB изменить фокус между <a> ссылки, чтобы увидеть, что я имею в виду.

---

РЕДАКТИРОВАТЬ

Поскольку это внешний плагин, я не хочу использовать другие элементы HTML для этого, как в Enable: сосредоточиться только на использовании клавиатуры (или нажатие вкладки).

Answer 1

На TAB щелчок e.key === 'Tab' (или же e.keyCode=9 в коде ASCI)

Узнайте здесь: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Используйте эту функцию:

document.addEventListener('keydown', function(e) {
  if (e.key === 'Tab') {
   console.log('tab is clicked!')
  }
});

.pagination {
  padding: 20px;
}

.pagination a {
  padding: 10px;
}

.pagination a:focus {
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.pagination a:active {
  border: 1px solid black;
}

<div class="pagination">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
</div>

ИЛИ только по CSS

этот плагин: https://github.com/ten1seven/track-focus в css:

body[data-whatinput="keyboard"] a:focus {
  box-shadow:  0 0 5px red;
}

Answer 2

Я думаю, что вы можете быть этот код здесь

.pagination {
  padding: 20px;
}

.pagination a {
    padding: 10px;
    border: 1px solid transparent;
}

.pagination a:focus {
  outline:0;
  box-shadow: inherit;
}

.pagination a:active {
  border: 1px solid black;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

<div class="pagination">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
</div>