Wie kann ich den modalen Trigger Button nach dem Schließen des Modales im Bootstrap nicht fokussieren

Question

Ich kann nicht scheinen, die Schaltfläche nach dem Schließen des Modals zu verwischen.

$('#exampleModal').on('hidden.bs.modal', function(e){ 
     $('button').blur(); 
    }); 

Ich habe das obige versucht und es scheint immer noch nicht zu verwischen. Ich habe fast alles ausprobiert. Die einzige Lösung besteht darin, ein Timeout festzulegen und es zu verwischen, nachdem das Modell den verborgenen Übergang beendet hat. Jede bessere Lösung?

Answer 1

Der Fokus zurück auf das Triggerelement wird innerhalb des modalen Plugins mit einer .one() Bindung festgelegt, die leider nicht ungebunden werden kann. Die gute Nachricht ist, dass wir dies tun können:

$('#myModal').on('shown.bs.modal', function(e){ 
    $('#myModaltrigger').one('focus', function(e){$(this).blur();}); 
}); 

Wo #myModaltrigger die ID des modalen Auslöseknopf ist. Der Grund für die Verwendung der .one() Bindung ist, dass die Funktion zur Unschärfe nur aufgerufen wird, nachdem das Modal angezeigt wurde. Sobald es sich versteckt und der Fokus/Unschärfe auftritt, kann die Taste normal fokussiert werden, z. B. indem Sie darauf tippen, ohne dass es automatisch unscharf wird.

Siehe this working example

Answer 2

der Tat ist @cvrebert hier, dass diese einen negativen Einfluss auf die Zugänglichkeit zu tun.

blur() setzt den Fokus, so Tastaturbenutzer (beide sehende Tastaturbenutzer und kritischer Nutzer von Screenreadern) werden prallte effektiv zurück zum Beginn der Seite.

versuchen Sie http://jsbin.com/sukevefepo/1/ nur mit der Tastatur: TAB zur Schaltfläche, triggern Sie es mit ENTER/SPACE, dann TAB zum Schließen-Taste, ENTER/SPACE. Jetzt, nachdem das Modal geschlossen ist, TAB ... und Sie sehen, dass Sie sich wieder auf den allerersten Link konzentrieren. Für etwas anderes als die einfachsten Seiten ist dies im besten Fall ein großes Ärgernis und kann für Screenreader-Benutzer dramatisch verwirrend sein.

kurz: das aktuelle Bootstrap-Verhalten ist korrekt. Ich verstehe den Wunsch, die fokussierte Erscheinung des modalen Triggers zu neutralisieren, sobald das Modal selbst geschlossen ist ... aber die Verwendung von blur() ist nicht die Antwort (es sei denn, Sie interessieren sich wenig für Keyboard/AT-Benutzer). Ein robusterer Ansatz, den ich für zukünftige Versionen von Bootstrap untersuchen möchte, ist das dynamische Festlegen einer Klasse für den Body, sobald ein Benutzer zum ersten Mal mit TAB/SHIFT + TAB navigiert (was einen Tastaturbenutzer angibt), und zu unterdrücken: Fokus Stile für diese Situationen sonst.

Answer 3

Meine Lösung, die mit mehreren modals auf Seite (basierend auf Bootstrap modal examples) arbeitet:

$('.modal').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget); // Button that triggered the modal 
    button.one('focus', function (event) { 
     $(this).blur(); 
    }); 
});