Question

单击后如何防止按钮保持聚焦？

HTML

<div class="container">
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

 body {
    margin: 10px;
}

请在此Fiddle中查看我的意思。

我知道我可以通过将样式应用于锚点<a>而不是按钮来解决这个问题，但我无法做到这一点，因为我必须保留以下原始asp.net控件。

<asp:Button ID="SearchResultsPDF"  runat="server" Text="PDF Report" CssClass="btn btn-default" OnClick="PDFReport_Click" />

<asp:Button id="SearchResultsCSV" runat="server" Text="CSV Report" CssClass="btn btn-default" onClick="CSVReport_Click"></asp:Button>

此外，我已经看到this solution使用jQuery，它工作正常，但它看起来太具体了。

的jQuery

$(".btn").mouseup(function(){
    $(this).blur();
})

我想知道是否只有CSS解决方案，我很欣赏如何做到这一点的一些指示。感谢。

Answer 1

如果您不想使用该jquery片段，则无法添加课程。我能想到的唯一选择是覆盖:focus的样式。

.btn-default:focus {
    background-color: #fff;
    border-color: #ccc;
}

理想情况下，您可能希望使用自己的类，但这取决于您是否可以向asp:Button添加类。

Answer 2

你想要这样的东西：

<button class="btn btn-primary btn-block" onclick="this.blur();">...

.blur（）方法正确地删除焦点突出显示并且不会弄乱Bootstraps的样式。

Answer 3

例如，如果您的按钮中的bakcground颜色为css

.My_button{
   background:#00c189;
}

默认情况下，

bootstrap在按钮中具有焦点颜色

单击后如何防止按钮保持聚焦？

尝试：

.My_button:focus, My_button:hover{
   background:#00c189;
}

如果不能使用

.My_button:focus, My_button:hover{
       background:#00c189 !important;
    }

Answer 4

如果您正在使用React-Bootstrap并希望保持良好的可访问性：

onMouseDown={this.handleClick} onKeyUp={(e) => {if (e.keyCode === 13 || e.keyCode === 32) {this.handleClick()}}}

handleClick(e) { if (e) {e.preventDefault()}; }

按钮的聚焦发生在MouseDown事件之后，因此我们会在用户单击时阻止它。如果我们停在那里，那么空格键和返回键不会“点击”按钮。不要为onKeyUp事件阻止默认，因为在点击其他地方后按钮继续看起来“聚焦”。

停止Bootstrap组按钮以保持专注

4 个答案: