it-swarm.com.de

So entfernen Sie den Fokus um die Schaltflächen beim Klicken

Meine Schaltflächen sind alle hervorgehoben, nachdem ich sie geklickt habe. Dies ist in Chrome.

UnselectedSelected

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

Ich benutze Bootstrap mit einem Theme, aber ich bin mir ziemlich sicher, dass es nicht so ist: Ich habe das schon bei einem anderen Projekt bemerkt. 

Es geht weg, wenn ich anstelle von <a> ein <button>-Tag verwende. Warum? Wenn ich <button> verwenden wollte, wie sollte ich es entfernen lassen?

152
Sean Clark Hess

Ich habe diese Fragen und Antworten auf einer anderen Seite gefunden und den Stil des Schaltflächenfokus außer Kraft gesetzt. Dieses Problem kann spezifisch für Mac OS mit Chrome sein.

.btn:focus {
  outline: none;
}

Beachten Sie jedoch, dass dies Auswirkungen auf die Barrierefreiheit hat und nicht empfohlen wird, bis Sie einen guten konsistenten Fokusstatus für Ihre Tasten und Eingaben haben. Gemäß den Kommentaren unten gibt es Benutzer, die keine Mäuse verwenden können.

215
jerimiah797

Sie wollen etwas wie:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

Die .blur () -Methode entfernt die Fokus-Hervorhebung korrekt und stört die Bootstraps-Styles nicht.

75
cshotton

meines Wissens ist es so, dass der Fokus zuerst nach dem Ereignis onMouseDown angewendet wird. Daher kann der Aufruf von e.preventDefault() in onMouseDown abhängig von Ihren Anforderungen eine saubere Lösung sein. Dies ist sicherlich eine barrierefreie Lösung, die jedoch das Verhalten von Mausklicks anpasst, die möglicherweise nicht mit Ihrem Webprojekt kompatibel sind.

Ich verwende diese Lösung derzeit (innerhalb eines react-bootstrap-Projekts) und erhalte nach einem Klick kein Fokusflimmern oder einen bleibenden Fokus der Schaltflächen, aber ich bin immer noch in der Lage, meinen Fokus anzuzeigen und den Fokus derselben Schaltflächen visuell zu visualisieren.

29
pjs

Es ist zwar einfach, die Umrisslinie für alle fokussierten Schaltflächen zu entfernen (wie in answer von user1933897), aber aus Sicht der Barrierefreiheit ist diese Lösung schlecht (siehe beispielsweise Stoppen Sie das Setzen des Browsers mit dem Standardfokus Gliederung )

Auf der anderen Seite ist es wahrscheinlich unmöglich, Ihren Browser davon zu überzeugen, den geklickten Button nicht mehr als fokussiert zu gestalten, wenn er den Eindruck hat, dass er fokussiert ist, nachdem Sie darauf geklickt haben (ich sehe Sie an, Chrome unter OS X).

Also was können wir tun? Ein paar Optionen kommen mir in den Sinn.

1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })

Sie weisen Ihren Browser an, den Fokus um die Schaltflächen unmittelbar nach dem Klicken auf zu entfernen. Durch die Verwendung von mouseup anstelle von click behalten wir das Standardverhalten für tastaturbasierte Interaktionen bei (mouseup wird nicht durch die Tastatur ausgelöst).

2) CSS: .btn:hover { outline: 0 !important }

Hier deaktivieren Sie die Kontur nur für hovered -Tasten. Natürlich ist es nicht ideal, kann aber in manchen Situationen ausreichend sein.

28
Alexis

Ich kann nicht glauben, dass noch niemand dies geschrieben hat.

Verwenden Sie eine Beschriftung anstelle einer Schaltfläche.

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

Fiddle

26
Adam McKenna

Das funktioniert bei mir eine andere Lösung, die nicht erwähnt wird. Werfen Sie es einfach in das Click-Event ...

$(this).trigger("blur");

Oder rufen Sie es von einer anderen Veranstaltung/Methode auf ...

$(".btn_name").trigger("blur");
9
Rob

Wenn Sie die Regel :focus { outline: none; } zum Entfernen von Konturen verwenden, kann der Link oder das Steuerelement fokussiert werden, ohne dass der Fokus für die Tastaturbenutzer angezeigt wird. Methoden, um sie mit JS wie onfocus="blur()" zu entfernen, sind noch schlimmer und führen dazu, dass Tastaturbenutzer nicht mit dem Steuerelement interagieren können.

Die Hacks, die Sie verwenden können, dh eine Art OK, umfassen das Hinzufügen von :focus { outline: none; }-Regeln, wenn Benutzer mit der Maus interagieren, und sie wieder entfernen, wenn eine Tastaturinteraktion erkannt wird. Lindsay Evans hat dafür eine Lizenz geschaffen: https://github.com/lindsayevans/outline.js

Aber ich würde es vorziehen, eine Klasse für das HTML- oder Body-Tag festzulegen. Und haben in der CSS-Datei die Kontrolle darüber, wann sie verwendet werden sollen.

Zum Beispiel (Inline-Event-Handler dienen nur zu Demonstrationszwecken):

<html>
<head>
<style>
  a:focus, button:focus {
    outline: 3px solid #000;
  }
  .no-focus a, .no-focus button {
    outline: none;
  } 
</style>
</head>
<body id="thebody" 
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
    <p>This her is <a href="#">a link</a></p>   
    <button>Click me</button>
</body>
</html>

Ich habe einen Pen zusammengebracht: http://codepen.io/snobojohan/pen/RWXXmp

Aber Vorsicht, es gibt Leistungsprobleme. Dies erzwingt einen neuen Anstrich, wenn der Benutzer zwischen Maus und Tastatur wechselt. Weitere Informationen zum Vermeiden unnötiger Farben http://www.html5rocks.com/de/tutorials/speed/unnecessary-paints/

7
snobojohan

Das hat bei mir funktioniert. Ich habe eine benutzerdefinierte Klasse erstellt, die die erforderliche CSS überschreibt. 

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

 enter image description here

Der -webkit-box-shadow funktioniert für Chrome und Safari-Browser. 

6
Menaka

Ich habe das Gleiche bemerkt und obwohl es mich wirklich nervt, glaube ich, dass es keinen richtigen Umgang damit gibt.

Ich würde es gegen alle anderen Lösungen empfehlen, da diese die Zugänglichkeit der Schaltfläche vollständig aufheben. Wenn Sie nun auf die Schaltfläche tippen, werden Sie nicht den erwarteten Fokus erhalten.

Dies sollte vermieden werden!

.btn:focus {
  outline: none;
}
6
Oscar Bolaños

Stil

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

Verwenden

<button class="btn btn-primary not-focusable">My Button</button>
4
Bogdan Kanteruk

Spät, aber wer weiß, kann jemandem helfen. Das CSS würde folgendermaßen aussehen:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

Das HTML würde folgendermaßen aussehen:

<button type="button" class="btn btn-primary rHighlight">Text</button> 

Auf diese Weise können Sie das Verhalten und die damit verbundenen Verhaltensweisen beibehalten.

4
Stephanie Wyche

Ich habe dies in einem Kommentar oben erwähnt, aber es lohnt sich aus Gründen der Klarheit als separate Antwort. Solange Sie nicht wirklich den Fokus auf die Schaltfläche haben müssen, können Sie sie mit dem Ereignis focus entfernen, bevor sie CSS-Effekte anwenden kann:

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

Dadurch wird das Flimmern vermieden, das bei Verwendung des Click-Ereignisses sichtbar ist. Dadurch wird die Benutzeroberfläche eingeschränkt, und Sie können die Schaltfläche nicht aufrufen, dies ist jedoch nicht in allen Anwendungen ein Problem.

3
Charles

Versuchen Sie diese Lösung, um den Rand um die Schaltfläche zu entfernen. Fügen Sie diesen Code in CSS hinzu.

Versuchen  

button:focus{
outline:0px;
}

Wenn nicht funktioniert dann unten verwenden.

button:focus{
 outline:none !important;
 }
2
Rana Aalamgeer

Eine andere mögliche Lösung besteht darin, eine Klasse mithilfe eines Javascript-Listeners hinzuzufügen, wenn der Benutzer auf die Schaltfläche klickt, und diese Klasse dann mit einem anderen Listener vom Fokus entfernt. Dadurch bleibt die Zugänglichkeit erhalten (sichtbares Tab-Tab) und verhindert gleichzeitig, dass Chrome bei Anklicken eine Schaltfläche als fokussiert betrachtet.

JS:

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS:

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

Vollständiges Beispiel hier: https://jsfiddle.net/4bbb37fh/

2
Seb Woolford

Wir hatten ein ähnliches Problem und stellten fest, dass Bootstrap 3 Das Problem nicht auf ihren Registerkarten hat (in Chrome). Es sieht so aus, als würden sie Gliederungsstil verwenden, wodurch der Browser entscheiden kann, was am besten zu tun ist. Chrome scheint das zu tun, was Sie möchten: Zeigen Sie die Gliederung an, wenn Sie scharfgestellt haben, es sei denn, Sie haben nur auf das Element geklickt.

Die Unterstützung für outline-style ist schwer festzulegen, da der Browser entscheiden kann, was dies bedeutet. Überprüfen Sie am besten einige Browser und haben Sie eine Rückfallregel.

2
TeknoFiend

Wenn das Obige für Sie nicht funktioniert, versuchen Sie Folgendes:

.btn: focus {Gliederung: keine; Box-Schatten: keine; Rand: 2px. transparent;}

Wie Benutzer1933897 darauf hingewiesen hat, ist dies möglicherweise spezifisch für Mac OS mit Chrome.

2
alns

Es ist Arbeit, ich hoffe dir helfen

.btn:focus, .btn:focus:active {
    outline: none;
}

Für Leute, die einen reinen Css-Weg dazu wollen:

:focus:not(:focus-visible) { outline: none }

Dies könnte auch für Verknüpfungen usw. funktionieren, und der Bonus behält die Tastaturzugriffe bei. Schließlich wird es von Browsern ignoriert, die nicht unterstützen: Fokus sichtbar

1
Martin Pedros

Das funktioniert am besten

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
1
Saron

Ich finde eine Lösung. Wenn wir uns konzentrieren, verwenden Bootstrap Box-Shadow, also deaktivieren wir sie (nicht genügend Reputation, Bild kann nicht hochgeladen werden :().

Ich füge hinzu 

btn:focus{
    box-shadow:none !important;
}

es klappt.

1
toffee
  .btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

diese Gliederung: Keiner funktioniert sowohl für die Schaltfläche als auch für ein Tag

1
Milan Panigrahi
.btn:focus:active {
  outline: none;
}

dadurch wird die Umrisslinie beim Klicken entfernt, der Fokus bleibt jedoch beim Tabsen erhalten (für a11y)

1
yennefer

Wenn Sie nicht möchten, dass die Schaltfläche für den gesamten Status angezeigt wird, können Sie die CSS mit dem folgenden Code überschreiben

.btn.active.focus, .btn.active:focus, 
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus{
  outline: none;
}
0
Sabrina Luo

Sie können tabIndex="-1" einstellen. Es wird vom Browser veranlasst, diese Schaltfläche zu überspringen, wenn Sie durch fokussierbare Steuerelemente eine Tabulatortaste verwenden.

Bei anderen "Korrekturen", die hier vorgeschlagen werden, wird nur die Fokusumrisslinie entfernt, die Schaltflächen bleiben jedoch tabellierbar. Aus Sicht der Benutzerfreundlichkeit haben Sie jedoch bereits das Glühen entfernt, so dass Ihr Benutzer auf keinen Fall wissen kann, welche Schaltfläche gerade fokussiert ist.

Auf der anderen Seite hat das Nicht-Tabulieren von Schaltflächen Auswirkungen auf die Zugänglichkeit.

Ich verwende es, um den Fokusumriss von der X-Schaltfläche in bootstrap modal zu entfernen, die auf jede Weise einen "Schließen" -Knopf am unteren Rand hat, sodass meine Lösung keinen Einfluss auf die Zugänglichkeit hat.

0
zmechanic

Wenn Sie einen Webkit-Browser verwenden (und möglicherweise einen Browser, der mit dem Präfix des Webkit-Herstellers kompatibel ist), gehört diese Gliederung zur -webkit-focus-ring-Pseudoklasse der Schaltfläche. Setzen Sie einfach outline auf none:

*:-webkit-focus-ring {
  outline: none;
}

Chrome ist ein solcher Webkit-Browser, und dieser Effekt tritt auch unter Linux auf (nicht nur ein MacOS-Ding, auch wenn einige Chrome-Styles sind MacOS).

0
Nate Symer

Für AngularJS-Entwickler verwende ich die Lösung:

var element = $window.document.getElementById("export-button");
    if (element){
        element.blur();
    }

Denken Sie daran, $ window einzuspritzen.

0
Tomasz Waszczyk

Ich hatte das gleiche Problem unter MacOS und Chrome, als ich mit einer Schaltfläche ein "Übergangs" -Ereignis auslöste. Wenn jemand, der dies liest, bereits einen Ereignis-Listener verwendet, können Sie ihn lösen, indem Sie .blur() nach Ihren Aktionen aufrufen.

Beispiel:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

Wenn Sie jedoch noch keinen Ereignis-Listener verwenden, kann dies durch Hinzufügen eines zusätzlichen Listening unnötigen Aufwand verursachen, und eine Styling-Lösung wie in den vorherigen Antworten ist besser.

0
jospablos

Ich hatte das gleiche Problem bei der Verwendung von <a> als Schaltfläche und entdeckte es Ich habe gefehlt Eine Problemumgehung durch Hinzufügen von attr type="button" bewirkt, dass es sich zumindest für mich normal verhält.

<a type="button" class="btn btn-primary">Release Me!</a>

0
spcsLrg

direkt im HTML-Tag (in einem Szenario, in dem Sie das Thema bootstrap an einer anderen Stelle in Ihrem Design belassen möchten).

beispiele zum Ausprobieren ..

<button style="border: transparent;">
<button style="border: 1px solid black;">

..ect ,. je nach gewünschtem effekt.

0
Rapid537

Fügen Sie dies in CSS hinzu:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
0
Gabriel Reis