Entfernen oder deaktivieren Sie den Fokusrand des Browsers über Javascript

75

Weiß jemand, wie man den (in den meisten Browsern) gestrichelten Rand eines Dom-Elements deaktiviert oder manipuliert, wenn es den Fokus in einer Tabindex-Reihenfolge hat?

Ich möchte meinen eigenen Stil für ein fokussiertes Element erstellen, aber es wäre großartig, die vorhandene Funktion zu verwenden, da es mit tabindex möglich ist, das Keydown-Ereignis an das dom-Element zu binden.

— helle
quelle

177

Erstellen Sie einfach eine CSS-Regel für die gewünschten Elemente outline:none;

— Gabriele Petrioli
quelle

2

Das ist ganz gut, wenn Sie mit der Maus auf das Element klicken, dessen Rand nicht mehr angezeigt wird, aber wenn Sie durch die Tastatur navigieren? Wie heben Sie das Element hervor?

— Coorasse

1

@coorasse, wenn Sie es nur für Klicks ausblenden möchten, müssen Sie Javascript verwenden und .blur()das Element aufrufen , sobald Sie darauf klicken.

— Gabriele Petrioli

epische kurze Antwort :) +1

— Al-Hanash Moataz

38

CSS-Trick:

:focus { outline: none; }

— goker.cebeci
quelle

4

Es ist wichtig, Usability-Probleme zu berücksichtigen, sobald Sie eine im Browser native Eingabehilfenfunktion deaktivieren. Ich schlage vor, einen eigenen Umrissfokus zu erstellen, z. B. die Hintergrundfarbe Gelb.

— Blagus

4

Wenn ich in Firefox 53.0 die Gliederung mit einer der vorgeschlagenen Lösungen deaktiviere, zeigt Firefox die Standardlösung an.

Wenn ich jedoch eine leere Farbe verwende, wird nicht erkannt, dass der Umriss ausgeblendet ist:

input:focus{
   outline: 1px solid rgba(255,255,255,1);
}

— hsyl20
quelle

3

input::-moz-focus-inner { border: 0; }

— Mayur bhalgama
quelle

1

a {
outline: 0;
}

a: hover,
a: active,
a: focus {
     outline: none;
}

input::-moz-focus-inner {
border: 0;
}

— Rotamota
quelle

0

:focus state- Setzen Sie die Gliederungseigenschaft auf 0px solid transparent.

— Mahendra Kulkarni
quelle

-2

$(function() {
     $('a').click(function() { $(this).blur(); });
     $('input').click(function() { $(this).blur(); });
});

Verwenden Sie keinen CSS-Deaktivierungsfokus: http://outlinenone.com/ Verwenden Sie andere Benutzer.

— slva2000
quelle

1

warum sollte ich nicht css verwenden? Ich sehe den Punkt in Ihrem Link, aber Ihre vorgeschlagene Lösung wird die GUI völlig ausflippen und Sie werden nicht in der Lage sein, auf die Felder zuzugreifen.

— Helle

-8

Mit jQuery können Sie dies tun

$("#nav li a").focus(function(){
  $(this).blur();
});

— Boris Delormas
quelle

Mit Unschärfe verliere ich den Fokus, nicht wahr? so kann ich nicht keydown event sowie mousewheel binden ...

— helle

Richtig, habe nicht die ganze Frage verstanden;)

— Boris Delormas