Как остановить кнопки от депрессии с помощью Bootstrap 3

Как сделать кнопку в 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

В вашем примере кнопки не остаются подавленными. Они остаются сосредоточены. Если вы хотите увидеть разницу, сделайте следующее:

Нажмите и удерживайте кнопку.
Release. Вы увидите, что когда вы отпустите мышь, внешний вид кнопки немного изменится, потому что он больше не нажат.

Если вы не хотите, чтобы ваши кнопки оставались сфокусированными после выхода, вы можете указать браузеру вывести фокус из них всякий раз, когда вы отпускаете мышь.

Пример

В этом примере используется jQuery, но вы можете добиться такого же эффекта с помощью ванильного JavaScript.

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

Fiddle

Ответ 2

Или вы можете просто использовать тег привязки, который может быть написан точно так же, но поскольку он не является элементом формы, он не сохраняет фокус:

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

Смотрите раздел "Якорный элемент" здесь: http://getbootstrap.com/css/#buttons

Ответ 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();
  });
});

Ответ 4

Или 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>

Ответ 5

Это фокус браузера, поскольку он является элементом формы (input). Вы можете легко удалить фокусировку с помощью 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.

Ответ 6

Это связано с состояниями элементов :active и :focus. Вам нужно изменить стили для этих состояний для этих кнопок. Например, для кнопки по умолчанию:

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

Ответ 7

Мои предпочтения:

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