Як зупинити натискання кнопок за допомогою Bootstrap 3

Як автоматично натиснути на кнопку в Bootstrap 3 undepress після натискання?

Щоб повторити мою проблему, створіть сторінку з деякими кнопками, надайте їм відповідні класи завантаження (і включіть завантаження):

<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. Натисніть і утримуйте кнопку.
2. Звільнення. Ви побачите, що коли ви відпускаєте мишу, зовнішній вигляд кнопки дещо змінюється, оскільки вона більше не натискається.

Якщо ви не хочете, щоб ваші кнопки залишалися сфокусованими після відпускання, ви можете доручити браузеру знімати фокус з них щоразу, коли ви відпускаєте мишу.

Приклад

У цьому прикладі використовується jQuery, але ви можете досягти такого ж ефекту за допомогою ванільного JavaScript.

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

Скрипка

Або ви можете просто використовувати прив'язувальний тег, який можна стилізувати точно так само, але оскільки це не елемент форми, він не зберігає фокус:

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

Дивіться розділ Anchor element тут: http://getbootstrap.com/css/#buttons

Кнопка залишається сфокусованою. Щоб це ефективно видалити, ви можете додати цей код запиту до свого проекту.

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

Мої уподобання:

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

Або кутовий спосіб:

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>

Це фокус браузера, оскільки це елемент форми ( 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.

Це пов’язано із станами :activeта :focusелементами. Вам потрібно змінити стилі для цих станів для цих кнопок. Наприклад, для кнопки за замовчуванням:

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