Javascript 停止引导组按钮以保持焦点

如何防止按钮在被单击后保持焦点

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>

请明白我的意思

我知道我可以通过将样式应用于锚定

而不是按钮来解决这个问题，但我不能这样做，因为我必须保留以下原始

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>

---

我想知道是否有一个CSS唯一的解决方案，我感谢一些指导如何做到这一点。谢谢。

如果您不想使用jquery代码段，并且无法添加类。我能想到的唯一选择是覆盖

：focus

的样式

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

---

理想情况下，您可能希望使用自己的类，但这取决于您是否能够将类添加到

asp:Button

，例如，如果您通过css将按钮中的圆形颜色设置为绿色

.My_button{
   background:#00c189;
}

默认的引导在按钮中有焦点颜色

如何防止按钮在被单击后保持焦点

尝试：

如果不工作，使用

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

---

你想要的是：

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

。。。

---

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

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

onMouseDown={this.handleClick}
onKeyUp={（e）=>{if（e.keyCode==13 | | e.keyCode==32）{this.handleClick（）}}}



handleClick（e）{
如果（e）{e.preventDefault（）}；
}

---

按钮的聚焦发生在MouseDown事件之后，因此我们防止用户单击时出现这种情况。如果我们停在那里，那么空格键和回车键不会“点击”按钮。不要为onKeyUp事件设置默认值，因为在单击其他位置后，按钮会继续看起来“聚焦”

您只需设置

.btn默认值：focus

的样式，使其具有与无焦点相同的背景色。如果不添加类或jquery，我看不到其他方法可以做到这一点。这是一种糟糕的做法吗？如果您无法添加类，并且不想使用jquery代码段，那么从我的判断，这是唯一的选择。如果你想让它成为全球性的，这不一定是坏习惯。谢谢。我尝试过这个方法，但在点击按钮后，边框仍然比其他颜色稍暗。我不想覆盖

：hover

行为。

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

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

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