如何使用Bootstrap 3停止button

如何在Bootstrap 3中点击button后自动取消button?

要复制我的问题,用一些button做一个页面,给他们适当的引导类(并包括引导):

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

加载页面并单击其中一个button。 它变得郁闷,突出显示,直到你点击页面上的其他地方(使用FF29和chrome35beta)。

单击和取消点击时检查input元素不会显示任何附加的类被附加和删除。

下面是一个Bootstrapbutton的例子: http : //jsfiddle.net/52VtD/5166/

7 Solutions collect form web for “如何使用Bootstrap 3停止button”

在你的例子中,button不会保持压低状态。 他们保持专注 。 如果您想查看差异,请执行以下操作:

  1. 点击并按住一个button。
  2. 发布。 你会看到,当你释放鼠标时,button的外观会稍微改变,因为它不再被按下。

如果你不想让你的button在发布后保持对焦状态,那么每当你释放鼠标时,都可以指示浏览器将焦点从它们中移出。

这个例子使用jQuery,但是你可以用vanilla JavaScript实现同样的效果。

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

小提琴

或者你可以使用一个可以完全一样的锚标签,但是由于它不是一个表单元素,所以不能保留焦点:

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

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

button保持焦点。 要有效地删除这个,你可以把这个查询代码添加到你的项目中。

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

或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_replace为其他元素。

或者属性方式:

 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> 

这与:active :focus元素状态有关。 您需要修改这些button的状态的样式。 例如,对于默认button:

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

这是浏览器的焦点,因为它是一个表单元素( input )。 你可以轻松地删除一点点的CSS焦点

 input:focus { outline: 0; } 

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

编辑

啊,我刚才看到button本身的颜色也改变了。 Bootstrap用这个CSS改变例如你的btn-defaultbutton的button:

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

如果你不想要这种行为,只要用你的CSS覆盖它。

我的偏好:

 <button onmousedown="event.preventDefault()">Calculate</button> 
  • 了解Bootstrap 3中的网格类(col-sm-#和col-lg-#)
  • 如何创build与Bootstrap 3兼容的粘性页脚
  • 避免点击里面的下拉菜单closures
  • 更大的字形
  • 单击closures时保持引导程序下拉菜单打开
  • Bootstrap 3。容器中的stream体添加不需要的填充
  • React Js有条件地应用类属性
  • 在Bootstrap 3中如何certificatenavbar-nav
  • 多字段与表格集
  • 使用prototype.js时,Twitter Bootstrap 3下拉菜单消失
  • 我怎样才能防止身体的滚动条,并在twitter引导modal dialog加载时转移?