Question

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

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

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

提前致谢

Answer 1

我们在谈论

pointer-events: none;

还是我错过了什么？

Answer 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。

Answer 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;
   }

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

3 个答案: