键盘标签上的输入效果 - >焦点，但不是点击 [英] Input effect on keyboard tab -> focus, but NOT on click

问题描述

当用户对输入进行跳过时，我希望焦点效果正常显示，但点击后，我不希望它显示。

When a user 'tabs over' to an input, I want the focus effect to be normally displayed, but on click, I don't want it to be visible.

用户匹配标签现在集中于切换按钮，我希望切换按钮具有轻微的发光轮廓，我目前能做到。

User hits tab, now focussed on toggle button, I would like the toggle button to have slight glowing outline, which I'm currently able to do.

现在，

用户点击，切换按钮或其关联标签，照常切换更改，
但，我希望光辉永远不会出现在第一位，或者尽快消失。

User clicks on the toggle button or it's associated label, toggle changes as usual, BUT, I want the glow to never appear in the first place, or to disappear as quickly as possible.

我知道 .blur（），现在我不得不使用 setTimeout 作为延迟修复，但我想知道是否有更好的方法来实现这一点，或者如果可能有 CSS解决方案。

I know about .blur(), and right now I'm having to use a setTimeout for a lazy fix, but I'd like to know if there's a better way to accomplish this, or if there's possibly a CSS only solution

推荐答案

我认为很多前端开发人员很难在美学和最佳实践之间找到平衡。这似乎是一个很大的妥协。

I think a lot of front-end developers struggle to find a balance between aesthetics and the best-practices for accessibility. This seems like a great compromise.

这是我做的。

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 9) {
    $('body').addClass('show-focus-outlines');
  }
});

document.addEventListener('click', function(e) {
  $('body').removeClass('show-focus-outlines');
});

样式

Styles

body:not(.show-focus-outlines) button:focus, 
body:not(.show-focus-outlines) [tabindex]:focus {
  outline: none;
}

这篇关于键盘标签上的输入效果 - >焦点，但不是点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！