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

Question

如何在Bootstrap 3中使按钮在被点击后自动弹起？

要复制我的问题，请创建一个带有一些按钮的页面，为它们设置适当的Bootstrap类（并包含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）。

当点击或未点击时检查输入元素，不会显示任何附加的类被添加或删除。

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

- Robert Byers

Answer 1

在您的示例中，按钮不会保持按下状态，它们保持聚焦状态。 如果您想看到差异，请执行以下操作：

1. 单击并按住一个按钮。
2. 松开。 您会发现当您松开鼠标时，按钮的外观会略微改变，因为它不再被按下。

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

示例

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

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

Fiddle

- abl

Answer 2

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

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

请在这里查看锚元素部分：http://getbootstrap.com/css/#buttons

- jme11

---

我认为这比blur()方法更好。在许多浏览器中，使用blur()方法会出现焦点样式的闪烁，这可能不是您想要的。一个想法是使用<span>元素代替指向空fragid的锚点，因为这可能会导致滚动到顶部的行为。这里有一个fiddle，对比了这三种方法。 - David K.

这种方法对我无效。我仍然可以使用锚点标签获得一个聚焦的按钮元素。 - Hinrich

在当前版本的Chrome和Firefox中进行快速测试，发现对于没有href属性的锚点标签（如<a role="button" class="btn btn-default">yada</a>），它可以正常工作，但是如果有href属性（如@jme11的例子），则仍然会保持选定状态。我本以为没有href属性的锚点是无效的，但是Chrome和Firefox的一致性使其更加吸引人——哦，而且在IE11中也可以正常工作，即使没有href属性。 - Typhlosaurus

@Typhlosaurus：一个没有href属性的锚点标签是有效的HTML 5：*"如果a元素没有href属性，则该元素表示一个占位符，用于放置链接的位置"*(来自W3C HTML 5规范)。这种方法对我很有效，而且没有将链接到空的fragid的潜在副作用。 - Daniel Saner

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

- chris31389

---

在我将 event 从 click(function()) 中移除后，这个答案对我起作用了。 - Diaa

Answer 4

我的偏好：

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

- Drazen Bjelovuk

Answer 5

或者使用Angular方式：

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>

- naorz

---

这引导我朝着正确的方向，但出现了以下错误 element.blur() 不是一个函数，所以我用了 event.target.blur()。 - thatandrey

不要忘记在指令销毁时解除绑定该监听器！ - Peter Kirby

@PeterKirby，如果它直接绑定到HTML节点，它不会自动销毁吗？ - Stalinko

Answer 6

因为它是表单元素 (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覆盖它即可。

- Anthony Weber

Answer 7

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

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

- rnevius