So verhindern Sie, dass Tasten mit Bootstrap 3 gedrückt bleiben

Wie kann man eine Schaltfläche in Bootstrap 3 automatisch deaktivieren, nachdem man darauf geklickt hat?

Um mein Problem zu replizieren, erstellen Sie eine Seite mit einigen Schaltflächen, geben Sie ihnen die entsprechenden Bootstrap-Klassen (und schließen Sie Bootstrap ein):

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

Laden Sie die Seite und klicken Sie auf eine der Schaltflächen. Es wird gedrückt und hervorgehoben, bis Sie auf eine andere Stelle auf der Seite klicken (mit FF29 und chrome35beta).

Wenn Sie das Eingabeelement beim Klicken und Deaktivieren überprüfen, werden keine zusätzlichen Klassen angezeigt, die angehängt und daraus entfernt werden.

Hier ist ein Beispiel dafür, wie Bootstrap-Schaltflächen gedrückt bleiben: http://jsfiddle.net/52VtD/5166/

In Ihrem Beispiel bleiben die Tasten nicht gedrückt. Sie bleiben konzentriert . Wenn Sie den Unterschied sehen möchten, gehen Sie wie folgt vor:

1. Klicken und halten Sie eine Schaltfläche gedrückt.
2. Veröffentlichung. Sie werden sehen, dass sich das Erscheinungsbild der Schaltfläche beim Loslassen der Maus geringfügig ändert, da sie nicht mehr gedrückt wird.

Wenn Sie nicht möchten, dass Ihre Schaltflächen nach dem Loslassen fokussiert bleiben, können Sie den Browser anweisen, den Fokus bei jedem Loslassen der Maus zu entfernen.

Beispiel

In diesem Beispiel wird jQuery verwendet, aber Sie können den gleichen Effekt mit Vanille-JavaScript erzielen.

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

Geige

Oder Sie können einfach ein Ankertag verwenden, das genau gleich gestaltet werden kann. Da es sich jedoch nicht um ein Formularelement handelt, bleibt der Fokus nicht erhalten:

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

Siehe den Abschnitt Ankerelemente hier: http://getbootstrap.com/css/#buttons

Die Taste bleibt fokussiert. Um dies effizient zu entfernen, können Sie diesen Abfragecode zu Ihrem Projekt hinzufügen.

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

Dies funktioniert auch für Ankerverbindungen

$(document).ready(function () {
  $(".navbar-nav li a").click(function(event) {
    // Removes focus of the anchor link.
    $(this).blur();
  });
});

Oder eckiger Weg:

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

Ersetzen Sie _MORE_ELEMENT_ durch Ihre anderen Elemente.

Oder Attribut Weg:

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

app.directive('blurMe', blurElemDirective);

Fügen Sie dann das Attribut zu Ihrem HTML-Element hinzu: blur-me

<button blur-me></button>

Meine Vorliebe:

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

Es ist der Fokus des Browsers, da es sich um ein Formularelement handelt ( input). Sie können die Fokussierung leicht mit ein wenig CSS entfernen

input:focus {
    outline: 0;
}

Hier ist die Geige mit Ihrem Beispiel: http://jsfiddle.net/52VtD/5167/

BEARBEITEN

Ah, ich habe gerade gesehen, dass sich auch die Farbe des Knopfes ändert. Bootstrap ändert die Schaltfläche zB Ihrer btn-defaultSchaltfläche mit diesem CSS:

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

Wenn Sie dieses Verhalten nicht möchten, überschreiben Sie es einfach mit Ihrem CSS.

Dies hat mit den Zuständen :activeund :focusElement zu tun . Sie müssen die Stile für diese Status für diese Schaltflächen ändern. Zum Beispiel für die Standardschaltfläche:

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