html恢复按钮按下前的状态,html-如何阻止按钮在Bootstrap 3中保持按下状态

html-如何阻止按钮在Bootstrap 3中保持按下状态

单击后如何使Bootstrap 3中的按钮自动取消按下？

要复制我的问题，请制作一个带有一些按钮的页面，为它们提供适当的引导程序类(并包括引导程序)：

加载页面，然后单击按钮之一。 它会变得沮丧并突出显示，直到您单击页面上的其他位置(使用FF29和chrome35beta)。

在单击和未单击时检查输入元素不会显示附加的其他类，也不会从中删除任何其他类。

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

7个解决方案

90 votes

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

单击并按住一个按钮。

发布。 您会看到，释放鼠标时，按钮的外观会略有变化，因为它不再被按下。

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

例

本示例使用jQuery，但您可以使用普通JavaScript达到相同的效果。

$(".btn").mouseup(function(){

$(this).blur();

})

小提琴

abl answered 2019-09-23T21:15:45Z

24 votes

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

one.

请参阅此处的“锚点”元素部分：[http://getbootstrap.com/css/#buttons]

jme11 answered 2019-09-23T21:16:15Z

10 votes

该按钮保持焦点。 为了有效地消除这一点，您可以将此查询代码添加到您的项目中。

$(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 answered 2019-09-23T21:16:45Z

8 votes

或成角度的方式：

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

naorz answered 2019-09-23T21:17:28Z

8 votes

我的偏好：

Calculate

Drazen Bjelovuk answered 2019-09-23T21:17:51Z

1 votes

这与: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 answered 2019-09-23T21:18:15Z

1 votes

这是浏览器的焦点，因为它是一个表单元素(btn-default)。您只需一点点CSS就可以轻松消除焦点

input:focus {

outline: 0;

}

这是您的示例的小提琴：[http://jsfiddle.net/52VtD/5167/]

编辑

啊，我现在刚刚看到按钮本身的颜色也发生了变化。 引导程序更改按钮例如 您的btn-default与此CSS对应的按钮：

.btn-default:focus {

color: #333;

background-color: #ebebeb;

border-color: #adadad;

}

如果您不希望这种行为，只需用CSS覆盖它即可。

Anthony Weber answered 2019-09-23T21:19:01Z