如何使用Bootstrap 3阻止按钮保持按下状态

在单击后如何使Bootstrap 3中的按钮自动取消按下？

要复制我的问题，请制作一个带有一些按钮的页面，为它们提供适当的引导程序类（并包括引导程序）：

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

加载页面，然后单击按钮之一。它会变得沮丧并突出显示，直到您单击页面上的其他位置（使用FF29和chrome35beta）。

在单击和未单击时检查输入元素不会显示附加的任何类，也不会从中删除任何其他类。

这是一个使Bootstrap按钮保持按下状态的示例：http : //jsfiddle.net/52VtD/5166/

在您的示例中，按钮不会保持按下状态。他们保持专注。如果要查看区别，请执行以下操作：

1. 单击并按住一个按钮。
2. 释放。您会看到，释放鼠标时，按钮的外观略有变化，因为不再按下该按钮。

如果您不希望按钮在释放后保持聚焦，则可以指示浏览器在释放鼠标时将焦点移开。

例

此示例使用jQuery，但您可以使用原始JavaScript达到相同的效果。

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

小提琴

或者，您可以仅使用样式可以完全相同的锚标记，但是由于它不是表单元素，因此无法保持焦点：

<a href="#" role="button" class="btn btn-default">one</a>.

请参阅此处的锚元素部分：http : //getbootstrap.com/css/#buttons

该按钮保持焦点。为了有效地消除这一点，您可以将此查询代码添加到您的项目中。

$(document).ready(function () {
  $(".btn").click(function(event) {
    // Removes focus of the button.
    $(this).blur();
  });
});

这也适用于锚链接

$(document).ready(function () {
  $(".navbar-nav li a").click(function(event) {
    // Removes focus of the anchor link.
    $(this).blur();
  });
});

我的偏好：

<button onmousedown="event.preventDefault()" class="btn">Calculate</button>

或成角度的方式：

function blurElemDirective() {
  return {
    restrict: 'E',
    link: function (scope, element, attrs) {
      element.bind('click', function () {
        element.blur();
      });
    }
  };
}

app.directive('button', blurElemDirective);
app.directive('_MORE_ELEMENT_', blurElemDirective);

将_MORE_ELEMENT_替换为其他元素。

或属性方式：

function blurElemDirective() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element.bind('click', function () {
        element.blur();
      });
    }
  };
}

app.directive('blurMe', blurElemDirective);

然后将该属性添加到您的html元素中：blur-me

<button blur-me></button>

这是浏览器的焦点，因为它是表单元素（input）。您只需一点CSS即可轻松移除焦点

input:focus {
    outline: 0;
}

这是您示例的小提琴：http : //jsfiddle.net/52VtD/5167/

编辑

啊，我现在刚刚看到按钮本身的颜色也发生了变化。Bootstrapbtn-default使用此CSS更改例如您的按钮的按钮：

.btn-default:focus {
    color: #333;
    background-color: #ebebeb;
    border-color: #adadad;
}

如果您不希望这种行为，只需用CSS覆盖它即可。

这与:active和:focus元素状态有关。您需要为这些按钮修改这些状态​​的样式。例如，对于默认按钮：

.btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    color: #333;
    background-color: #ccc;
    border-color: #fff;
}