Question

我使用datatables from fluent kit，当单击（: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>链接之间的焦点，以了解我的意思。

编辑

因为它是外部插件，所以我不想像Enable :focus only on keyboard use (or tab press)中那样使用其他HTML元素来工作。

Answer 1

在TAB上单击e.key === 'Tab'（或在ASCI代码中为e.keyCode=9）

在这里学习：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>

删除：active和：focus上的轮廓，但不删除：focus上的轮廓

2 个答案: