如何停止按钮保持按下与Bootstrap 3 [英] How to stop buttons from staying depressed with Bootstrap 3

问题描述

如何在单击Bootstrap 3后自动取消按钮？

How do you make a button in Bootstrap 3 undepress automatically after being clicked?

要复制我的问题，使用一些按钮创建一个页面，给他们适当的引导类（并包含引导程序）：

To replicate my problem, make a page with some buttons, give them appropriate bootstrap classes (and include bootstrap):

<input id="one" type="button" class="btn btn-default" value="one">
<input id="two" type="button" class="btn btn-primary" value="two">

加载页面并单击其中一个按钮。它会变得按下并突出显示，直到你点击页面上的其他地方（使用FF29和chrome35beta）。

Load the page and click on one of the buttons. It becomes depressed and highlighted until you click somewhere else on the page (using FF29 and chrome35beta).

检查输入元素，点击和未点击不显示任何额外的类

Inspecting the input element while clicked and unclicked doesn't show any additional classes being attached and removed from it.

这里有一个Bootstrap按钮停滞不前的示例： http://jsfiddle.net/52VtD/5166/

Here's an example of Bootstrap buttons staying depressed: http://jsfiddle.net/52VtD/5166/

推荐答案

在您的示例中，按钮不会停留郁闷。他们保持专注。如果您想查看差异，请执行以下操作：

In your example, the buttons do not stay depressed. They stay focused. If you want to see the difference, do the following:

1. 点击并按住按钮。


2. Release。

如果您不想要的话，按钮的外观会稍有变化，

If you do not want your buttons to stay focused after being released you can instruct the browser to take the focus out of them whenever you release the mouse.

这个例子使用jQuery，但是你可以用vanilla JavaScript实现相同的效果。

This example uses jQuery but you can achieve the same effect with vanilla JavaScript.

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

小提琴

Fiddle

这篇关于如何停止按钮保持按下与Bootstrap 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！