Html 如何使用Bootstrap 3防止按钮一直处于按下状态

如何使Bootstrap3中的按钮在被单击后自动按下

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

加载页面并单击其中一个按钮。它会被按下并高亮显示，直到您单击页面上的其他位置（使用FF29和chrome35beta）

在单击和取消单击时检查输入元素不会显示附加或删除的任何其他类

---

下面是一个引导按钮保持按下状态的示例：

它是浏览器的焦点，因为它是表单元素（

input

）。 你可以用一点css轻松地消除聚焦

input:focus {
    outline: 0;
}

下面是你的例子：

编辑

啊，我刚才看到按钮本身的颜色也变了。Bootstrap使用以下css更改按钮，例如您的

btn默认值

按钮：

.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;
}

---

或者您可以只使用一个锚定标记，其样式可以完全相同，但由于它不是表单元素，因此不会保留焦点：

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

。

---

请参见此处的锚元素部分：

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

单击并按住按钮

释放。您将看到，当您释放鼠标时，按钮的外观会发生轻微变化，因为它不再被按下

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

例子 本例使用jQuery，但使用vanilla JavaScript也可以达到同样的效果

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

---

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

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

或角度：

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

用其他元素替换“更多元素”

或属性方式：

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

app.directive('blurMe', blurElemDirective);

然后将属性添加到html元素：模糊我

<button blur-me></button>

我的偏好：

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

计算

我认为这是一个比blur（）方法更好的解决方案。在许多浏览器中，使用blur（）方法会出现焦点样式的闪光，这可能是您不想要的。一种想法是使用一个元素而不是指向空fragid的锚点，因为这可能会导致滚动到顶部行为。这是一个比较三者的方法。这种方法对我不起作用。在当前的chrome和firefox中，我仍然使用anchor tagA快速测试获得一个焦点按钮元素，显示它在没有href（

yada

）的anchor标记下工作，但如果它有href，则保持选中状态（根据@jme11示例）。我本以为href-less-anchor是无效的，但chrome和firefox之间的一致性让它很有吸引力-哦，而且它在IE11中也可以工作，没有href。@Typhlosaurus:an

href

-less-anchor标记是有效的HTML 5:“如果

a

元素没有

href

属性，那么该元素表示一个占位符，用于放置链接的位置。”（）。这种方法对我来说效果很好，没有链接到空fragid的潜在副作用。这使我朝着正确的方向前进，但引发了以下错误

element.blur（）不是函数

所以我做了

event.target.blur（）

当指令被销毁时，不要忘记解除该侦听器的绑定！@PeterKirby，如果它直接绑定到html节点，它不会被自动销毁吗？在我从

click（function（））

中删除

event

后，这个答案对我很有用。

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