如何删除点击按钮周围的焦点

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

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

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

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

当前回答

虽然很容易删除所有焦点按钮的轮廓(如user1933897的答案)，但从可访问性的角度来看，这种解决方案是糟糕的(例如，参见停止破坏浏览器的默认焦点轮廓)。

另一方面，如果浏览器在你点击按钮后认为它是聚焦的，那么它可能不可能说服你停止将你点击的按钮样式设置为聚焦(我在看着你，OS X上的Chrome)。

那么，我们能做什么呢?我想到了几个选择。

1) Javascript (jQuery): $('.btn').mouseup(function() {this.blur()})

您正在指示浏览器在单击按钮后立即删除任何按钮周围的焦点。通过使用mouseup而不是点击，我们保持了基于键盘的交互的默认行为(mouseup不会被键盘触发)。

2) CSS: .btn:hover {outline: 0 !important}

在这里，您只关闭悬停按钮的轮廓。显然这不是理想的，但在某些情况下可能足够了。

其他回答

风格

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

使用

<button class="btn btn-primary not-focusable">My Button</button>

有点核，但这是我在Angular 9上工作的简单方法。使用与因果关系，因为它影响每个html元素。

*:focus {
  outline: 0 !important;
}

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

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

记住注入$window。

将此添加到脚本中

$(document).ready(function() {
    $('#addBtn').focus(function() {
        this.blur();
    });
});

我有同样的问题使用<a>作为按钮，我发现我错过了一个工作区添加attr类型=“按钮”使它的行为正常为我至少。

推荐文章