删除 :active 和 :focus 上的轮廓，但不删除 :focus 上的轮廓答案

【问题标题】：Remove outline on :active & :focus but not on :focus only删除 :active 和 :focus 上的轮廓，但不删除 :focus 上的轮廓
【发布时间】：2018-07-17 14:13:43
【问题描述】：

我使用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> 链接之间的焦点以了解我的意思。

编辑

由于它是外部插件，我不想使用其他 HTML 元素来实现它，例如 Enable :focus only on keyboard use (or tab press)。

【问题讨论】：

Enable :focus only on keyboard use (or tab press)的可能重复
您可以将两者结合起来：a:active:focus，也可以排除一个a:focus:not(:active)。

标签： javascript html css fluent-kit

【解决方案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;
}

【讨论】：

告诉我更多帮助
我不认为 JS 是必要的。
对于捕获 TAB 点击事件，是的！但他/她可以使用插件
为什么在事件监听器中使用 jQuery？此外，不鼓励使用keyCode。
谢谢，它成功了。嗯，我不能投票给你，没有足够的声誉。打到15就可以了！再次感谢。

【解决方案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>

【讨论】：