使单击时单选按钮的焦点不可见，但焦点应在键盘导航上可见答案

【问题标题】：making focus invisible for radio buttons on click but focus should be visible on keyboard navigation使单击时单选按钮的焦点不可见，但焦点应在键盘导航上可见
【发布时间】：2017-10-13 17:36:18
【问题描述】：

如何使单选按钮的焦点仅在单击时不可见（焦点应通过键盘导航可见）

禁用鼠标按下事件或在 mousedown 上使用 settimeout(()=>$(event.target).blur(),1) 正在工作，但当焦点来自单击时，使用箭头键选择单选按钮不起作用。

那么，只有在单击时才使单选按钮的焦点不可见而不使箭头键选择不可用的最佳方法是什么？

提前致谢

【问题讨论】：

标签： javascript jquery css angular accessibility

【解决方案1】：

我们在谈论

pointer-events: none;

还是我错过了什么？

【讨论】：

我只想在点击时禁用焦点..通过使用“pointer-events:none”不会点击也被禁用？

【解决方案2】：

你可以试试这个代码：

HTML：

<input type="text" class="inp" />
<input type="radio" class="rb" />

CSS：

.inp {
   display: block;
}

.rb {
 /*hide default outline*/
   outline: none;  
}

[type=radio]:not(:hover):not(:active):focus {
  /*set custom focus ring instead via box-shadow*/
    box-shadow: 1px 0 1px #c5c3c3 inset, -1px 1px 1px #c5c3c3 inset, 0px 0px 0 2px #fff, 0px 0px 0 3px rgb(100, 149, 237);
}

它会在悬停和点击时隐藏焦点环，但在单选按钮通过键盘获得焦点时显示它。

这里是JSFiddle的链接

还有一个关于对焦环的提议（目前仅在 Firefox 中实现，但有polyfill 。

【讨论】：

它隐藏了悬停和点击的焦点，但是当点击后移动离开单选按钮时，焦点仍然可见。谢谢
@Moeed，对不起，我不明白你的意思。当您将焦点移到其他元素时，它确实会移除焦点。请参考 JSFiddle 上的更新示例
，当单选按钮被单击并且鼠标离开单选按钮（焦点没有移动到其他元素）时，盒子阴影仍然可见。我也想抑制它。

【解决方案3】：

这对我有用

为 mousedown 和 blur 添加了如下事件处理程序

--------------- 模板 -----

<input type="radio"
(mousedown)="removeOutline($event)"
(blur)="radioBlur($event)"/>

------事件处理程序 -----

removeOutline(event: MouseEvent): void {
        $(event.target).addClass("focus");
    }

radioBlur(event: MouseEvent): void {
        $(event.target).removeClass("focus");
        if ($(event.target).attr("class") === "") {
            $(event.target).removeAttr("class");
        }
    }

 -----------css---------------
  .focus {
        outline: 0;
   }

【讨论】：