我的按钮都有一个高亮后,我点击他们。这是Chrome。

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

我正在使用带有主题的Bootstrap,但我非常确定这不是它:我以前在另一个项目中注意到这一点。

如果我使用<a>标签而不是<button>,它就会消失。为什么?如果我想使用<button>,我怎么让它消失呢?


当前回答

对于解决方案中使用的AngularJS开发人员:

var element = $window.document.getElementById("export-button");
    if (element){
        element.blur();
    }

记住注入$window。

其他回答

可以设置tabIndex="-1"。它将使浏览器跳过此按钮时,你通过标签可聚焦控件。

其他“修复”建议这里,只删除焦点轮廓,但仍然留下按钮表。然而,从可用性的角度来看,你已经删除了辉光,所以你的用户不会知道当前聚焦的按钮是什么。

另一方面,使按钮非表格有可访问性的影响。

我用它来删除自举模式中的X按钮的焦点轮廓,在底部有重复的“关闭”按钮,所以我的解决方案对可访问性没有影响。

我刚刚在MacOS和Chrome上使用按钮触发“转换”事件时遇到了同样的问题。如果阅读本文的人已经在使用事件监听器,您可以通过在操作之后调用.blur()来解决这个问题。

例子:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

不过,如果您还没有使用事件侦听器,添加一个事件侦听器来解决这个问题可能会增加不必要的开销,像前面的回答提供的样式解决方案会更好。

I found the same situation using a submit button in a form using a bootstrap (v4.4.1) class. The problem arose as I was building a single-page user interface using JavaScript to manipulate all the required changes to the DOM. The form data was submitted to the server via 'fetch' using a JSON string rather than a HTTP POST request. Note that usually the form's default behaviour is to reload the document, and normally this would refresh the button, however the form's default behaviour was prevented by using e.preventDefault() in the listener function for the form's submit event (it is a single-page UI so the document is never reloaded and traffic to the server is minimised to data only). Given the document was not reloaded the button appeared to stay depressed until the user clicked elsewhere in the window. This is what I had (with the problem):

<输入类型=“submit”类=“btn btn-primary”>

这是我用来解决按钮一直按下的问题:

<input type=“submit” class=“btn btn-primary” onmouseup=“this.blur()”>

我在另一个页面上找到了这个问题和回答,覆盖按钮焦点样式对我有用。这个问题可能是Chrome的MacOS特有的。

.btn:focus {
  outline: none;
  box-shadow: none;
}

请注意,这对可访问性有影响,除非你的按钮和输入有一个良好的一致的焦点状态,否则不建议这样做。根据下面的评论,有些用户不能使用鼠标。

这里有两种可能的解决方案。

1.) 按钮类型=“按钮” 类名称=“btn-cart”onClick{(event)=>this.blur(event)}

2.)按钮类型="按钮" className="btn-cart" onclick={this.blur}

这两种解决方案都将删除按钮周围突出显示的部分 即-> blur()有自己的规范,它删除突出显示的部分周围。