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

78

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/

Robert Byers
quelle

Antworten:

97

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

abl
quelle
1
Sie waren alle ganz in Ordnung, es war der Fokus, nicht wirklich depressiv oder ausgewählt. Um dies zu lösen, könnte das Ändern des CSS für den Fokus funktionieren. In meinem Fall funktioniert das Entfernen des Fokus perfekt. Vielen Dank.
Robert Byers
1
@RobertByers Das Problem beim Ändern des CSS besteht darin, dass Sie den vom Bootstrap bereitgestellten spezifischen Stil für die fokussierten Schaltflächen nicht deaktivieren. Sie überschreiben vielmehr die Bootstrap-Standardeinstellungen und legen den Stil bei Fokussierung so fest, dass er dem Stil bei Nichtfokussierung entspricht. Wenn Sie später einen anderen Stil für einen anderen Schaltflächentyp hinzufügen, müssen Sie den Stil für beide Zustände schreiben: fokussiert und nicht fokussiert.
Abl
das hat bei mir funktioniert. versuchte es mit den unten erwähnten CSS-Hacks zu beheben, aber dieser kleine Trick gewinnt in Bezug auf Leichtigkeit und Effektivität. Vielen Dank!
Hinrich
Und wie kann dies mit CSS für alle Steuerelemente auf der Website erreicht werden?
VG
25

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

jme11
quelle
Ich denke, es ist eine bessere Lösung als die blur () -Methode. In vielen Browsern wird ein Blitz des Fokus-Stils mit der blur () -Methode angezeigt, die Sie möglicherweise nicht möchten. Ein Gedanke wäre, ein <span> -Element anstelle eines Ankers zu verwenden, der auf ein leeres Fragid zeigt, da dies dazu führen kann, dass nach oben gescrollt wird. Hier ist eine Geige , die die drei vergleicht.
David K.
14
Diese Methode hat bei mir nicht funktioniert. Ich bekomme immer noch ein fokussiertes Button-Element mit dem Anker-Tag
Hinrich
7
Ein schneller Test in aktuellem Chrome und Firefox zeigt, dass es für ein Ankertag ohne href ( <a role="button" class="btn btn-default">yada</a>) funktioniert , aber ausgewählt bleibt, wenn es ein href hat (gemäß @ jme11-Beispiel). Ich hätte gedacht, dass ein Anker ohne href ungültig ist, aber die Konsistenz zwischen Chrom und Firefox macht ihn ansprechend - oh, und er funktioniert in IE11 auch ohne href.
Typhlosaurus
Dies ist ein sehr kluger Ansatz; und es funktioniert großartig.
lgants
1
@Typhlosaurus: Ein href-less-Ankertag ist gültig. HTML 5: "Wenn das aElement kein hrefAttribut hat, stellt das Element einen Platzhalter dar, an dem andernfalls ein Link platziert worden wäre" ( W3C HTML 5-Spezifikation ). Der Ansatz hat für mich gut funktioniert, ohne die möglichen Nebenwirkungen einer Verknüpfung mit einem leeren Fragid.
Daniel Saner
10

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();
  });
});
chris31389
quelle
Während die markierte richtige Antwort für mich nicht funktionierte, war diese nicht sicher warum
Kevin Zhao
Diese Antwort war für mich , nachdem ich entfernt eventvon click(function()).
Diaa
8

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>
naorz
quelle
1
Dies führte mich in die richtige Richtung, warf aber den folgenden Fehler, element.blur() is not a functionso dass ich es tatevent.target.blur()
thatandrey
Vergessen Sie nicht, diesen Hörer zu lösen, wenn die Direktive zerstört wird!
Peter Kirby
@PeterKirby, wenn es direkt an den HTML-Knoten gebunden ist, wird es nicht automatisch zerstört?
Stalinko
8

Meine Vorliebe:

<button onmousedown="event.preventDefault()" class="btn">Calculate</button>
Drazen Bjelovuk
quelle
3

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.

Anthony Weber
quelle
1

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;
}
rnevius
quelle