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

Posted 2023-03-05

【中文标题】如何使用 Bootstrap 3 阻止按钮保持压抑状态

【英文标题】：How to stop buttons from staying depressed with Bootstrap 3

【发布时间】：2014-06-20 01:11:01

【问题描述】：

如何让 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】：

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

单击并按住按钮。 释放。您会看到，当您松开鼠标时，按钮的外观略有变化，因为它不再被按下。

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

示例

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

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

Fiddle

【参考方案2】：

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

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

在此处查看锚元素部分：http://getbootstrap.com/css/#buttons

【讨论】：

我认为是比 blur() 方法更好的解决方案。在许多浏览器中，焦点样式的闪光会出现在您可能不想要的 blur() 方法中。一种想法是使用 元素而不是指向空片段的锚点，因为这会导致滚动到顶部的行为。这是一个fiddle 比较这三者。

这种方法对我不起作用。我仍然使用锚标记获得焦点按钮元素

在当前 chrome 和 firefox 中的快速测试表明它适用于 没有 href (<a role="button" class="btn btn-default">yada</a>) 的锚标记，但如果它有 href (根据@jme11 示例）。我原以为无 href 的锚点是无效的，但 chrome 和 firefox 之间的一致性使它很有吸引力 - 哦，它也可以在没有 href 的 IE11 中使用。

@Typhlosaurus：href-less 锚标记是有效的 html 5："如果 a 元素没有 href 属性，则该元素代表一个占位符，其中否则可能会放置链接” (W3C HTML 5 spec)。这种方法对我来说效果很好，没有链接到一个空的脆弱的潜在副作用。

【参考方案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();
  );
);

【讨论】：

在我从 click(function()) 中删除 event 后，这个答案对我有用。

【参考方案4】：

我的偏好：

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

【参考方案5】：

或角度方式：

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>

【讨论】：

这引导我朝着正确的方向前进，但抛出了以下错误element.blur() is not a function 所以我做了event.target.blur()

当指令被销毁时不要忘记解除绑定监听器！

@PeterKirby，如果直接绑定到 html-node 会不会被自动销毁？

【参考方案6】：

这是浏览器的焦点，因为它是一个表单元素 (input)。 您可以使用一点 css 轻松消除焦点

input:focus 
    outline: 0;

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

编辑

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

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

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

【参考方案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;