使得焦点上点击，但重点单选按钮无形的应该是键盘导航可见

如何使集中单选按钮不可见只在点击（重点应该是通过键盘导航可见）使得焦点上点击，但重点单选按钮无形的应该是键盘导航可见

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

所以，什么是最好的方式使焦点不可见的单选按钮只有在点击时不使箭头键选择不可用？

在此先感谢

来源

2017-10-09 Moeed

这为我工作

添加的事件处理程序鼠标按下和模糊如下

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

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

来源

2017-10-13 09:36:18 Moeed

我们是在谈论

pointer-events: none;

还是我失去了一些东西？

来源

2017-10-09 05:48:34 Carsten

我只是想使用上click..by禁用焦点“指针事件：无”不会点击也被禁用？ – Moeed

你可以试试这个代码：

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了点。

来源

2017-10-09 09:09:15 Krusader

其隐藏焦点悬停和点击，但当点击后移动离开单选按钮时，焦点仍然可见。谢谢无论如何 – Moeed

@Moeed，抱歉，但我不明白你的意思。当您将焦点移至其他元素时，它会消除焦点。请点击JSFiddle – Krusader

上的更新示例，单击单选按钮并且鼠标离开单选按钮（焦点不会移动到其他元素）时，框阴影仍然可见。我也想要抑制这一点。 – Moeed

使得焦点上点击，但重点单选按钮无形的应该是键盘导航可见

回答

相关问题