Jak zatrzymać przyciski przed pozostawaniem przygnębionym za pomocą Bootstrap 3

Jak zrobić przycisk w Bootstrap 3 undepress automatycznie po kliknięciu?

Aby odtworzyć mój problem, zrób stronę z kilkoma przyciskami, podaj im odpowiednie klasy bootstrap (i dołącz bootstrap): 

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

Załaduj stronę i kliknij jeden z przycisków. Staje się wciśnięty i podświetlony, dopóki nie klikniesz gdzie indziej na stronie (używając FF29 i chrome35beta).

Sprawdzanie elementu wejściowego podczas kliknięcia i odblokowania Nie Pokaż wszelkie dodatkowe klasy, które są dołączane i usuwane z niego.

Oto przykład przycisków Bootstrap pozostających w depresji: http://jsfiddle.net/52VtD/5166/

Author: ringstaff, 2014-05-03
Source

7 answers

W twoim przykładzie przyciski nie pozostają wciśnięte. Pozostają skoncentrowane . Jeśli chcesz zobaczyć różnicę, wykonaj następujące czynności:

  1. Kliknij i przytrzymaj przycisk.
  2. Release. Zobaczysz, że po zwolnieniu myszy wygląd przycisku nieznacznie się zmienia, ponieważ nie jest już wciśnięty.

Jeśli nie chcesz, aby Twoje przyciski były skupione po zwolnieniu, możesz poinstruować przeglądarkę, aby usunęła z nich ostrość za każdym razem, gdy zwolnisz przycisk mysz.

Przykład

Ten przykład używa jQuery, ale można osiągnąć ten sam efekt z vanilla JavaScript.

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

Fiddle

 100
Author: abl,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-02 16:35:34

Lub możesz po prostu użyć znacznika kotwicy, który może być stylizowany dokładnie tak samo, ale ponieważ nie jest to element formularza, Nie zachowuje ostrości: 

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

Zobacz sekcję Anchor element tutaj: http://getbootstrap.com/css/#buttons

 25
Author: jme11,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-03 12:58:42

Przycisk pozostaje skupiony. Aby to skutecznie usunąć, możesz dodać ten kod zapytania do swojego projektu.

$(document).ready(function () {
  $(".btn").click(function(event) {
    // Removes focus of the button.
    $(this).blur();
  });
});

To również działa dla linków anchor 

$(document).ready(function () {
  $(".navbar-nav li a").click(function(event) {
    // Removes focus of the anchor link.
    $(this).blur();
  });
});
 11
Author: chris31389,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-12 12:58:44

Moje preferencje: 

<button onmousedown="event.preventDefault()" class="btn">Calculate</button>
 9
Author: Drazen Bjelovuk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-03-19 17:12:38

Lub droga kątowa: 

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);

Zastąp _MORE_ELEMENT_ innymi elementami.

Lub sposób atrybutu: 

function blurElemDirective() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element.bind('click', function () {
        element.blur();
      });
    }
  };
}

app.directive('blurMe', blurElemDirective);

Następnie Dodaj atrybut do elementu html: blur-me 

<button blur-me></button>
 8
Author: naorz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-18 16:21:53

Jest skupiony na przeglądarce, ponieważ jest elementem formularza (input). Możesz łatwo usunąć ogniskowanie za pomocą odrobiny css 

input:focus {
    outline: 0;
}

Oto twój przykład: http://jsfiddle.net/52VtD/5167/

EDIT

Ah, właśnie teraz widziałem, że kolor samego przycisku też się zmienia. Bootstrap zmienia przycisk np. twojego btn-default przycisku z tym css: 
.btn-default:focus {
    color: #333;
    background-color: #ebebeb;
    border-color: #adadad;
}

Jeśli nie chcesz tego zachowania, po prostu Nadpisz je swoim css.

 3
Author: Anthony Weber,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-03 11:14:35

Ma to związek ze Stanami elementu :active i :focus. Musisz zmodyfikować style dla tych stanów dla tych przycisków. Na przykład dla domyślnego przycisku: 

.btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    color: #333;
    background-color: #ccc;
    border-color: #fff;
}
 1
Author: rnevius,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-03 11:10:19