如何使用 Bootstrap 3 阻止按钮保持按下状态 [英] How to stop buttons from staying depressed with 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">

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.

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. Click and hold on a button.
2. Release. You will see that when you release the mouse the button's appearance changes slightly, because it is no longer pressed.

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.

Example

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

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

Fiddle

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