如何使用Bootstrap 3阻止按钮保持抑郁

Question

点击后如何在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/

Answer 1

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

1. 单击并按住按钮。
2. 发布。您将看到，当您松开鼠标时，按钮的外观会稍微改变，因为它不再被按下。

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

例

此示例使用jQuery，但您可以使用vanilla JavaScript实现相同的效果。

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

Fiddle

Answer 2

或者你可以使用一个锚标签，它的样式可以完全相同，但由于它不是一个表单元素，它不会保留焦点：

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

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

Answer 3

按钮保持聚焦状态。要有效地删除它，您可以将此查询代码添加到项目中。

$(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();
  });
});

Answer 4

或角度方式：

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>

Answer 5

我的偏好：

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

Answer 6

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

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

Answer 7

这是浏览器的焦点，因为它是一个表单元素（input）。您可以通过一点点css轻松移除聚焦

input:focus {
    outline: 0;
}

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

编辑

啊，我刚才看到按钮本身的颜色也发生了变化。 Bootstrap改变例如按钮。你用这个css的btn-default按钮：

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

如果您不想要这种行为，只需用您的css覆盖它。