我的按钮都有一个高亮后,我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap,但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>,它就会消失。为什么?如果我想使用<button>,我怎么让它消失呢?
我的按钮都有一个高亮后,我点击他们。这是Chrome。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
我正在使用带有主题的Bootstrap,但我非常确定这不是它:我以前在另一个项目中注意到这一点。
如果我使用<a>标签而不是<button>,它就会消失。为什么?如果我想使用<button>,我怎么让它消失呢?
当前回答
与TS溶液反应
const btnRef = useRef<HTMLButtonElement | null>(null);
const handleOnMouseUp = () => {
btnRef.current?.blur();
};
<button
ref={btnRef}
onClick={handleOnClick}
onMouseUp={handleOnMouseUp}
>
<span className="icon-plus"></span> Add Page
</button>
其他回答
我的理解是,焦点首先应用在onMouseDown事件之后,所以在onMouseDown中调用e.c preventdefault()可能是一个干净的解决方案,取决于你的需求。这当然是一个可访问性友好的解决方案,但显然它调整了鼠标点击的行为,这可能与您的web项目不兼容。
我目前正在使用这个解决方案(在一个反应引导项目中),我没有收到一个焦点闪烁或按钮点击后保留的焦点,但我仍然能够标签我的焦点和视觉上可视化相同按钮的焦点。
这是工作,希望能帮到你
.btn:focus, .btn:focus:active {
outline: none;
}
对于想要一个纯css方式的人来说:
:focus:not(:focus-visible) { outline: none }
这也可以为链接等工作,和奖金,它保持键盘的可访问性。最后,它被不支持焦点可见的浏览器忽略
我找到了一个解决方案,只需在css代码中添加以下行。
button:focus { outline: none }
您可以使用按钮的焦点事件。 这适用于angular的情况
<button (focus)=false >Click</button