Wie löschen Sie den Fokus in Javascript?

158

Ich weiß, dass dies nicht so schwer sein sollte, aber ich konnte die Antwort bei Google nicht finden.

Ich möchte ein Stück Javascript ausführen, das den Fokus von jedem Element löscht, auf dem es sich befindet, ohne vorher zu wissen, auf welchem Element sich der Fokus befindet. Es muss sowohl mit Firefox 2 als auch mit moderneren Browsern funktionieren.

Gibt es eine gute Möglichkeit, dies zu tun?

javascript focus

— Andres
quelle

Was bedeutet klarer Fokus? - Ist es dasselbe wie Unschärfe?

— Trottel

3

Ich möchte es so machen, dass kein Element im Browser den Fokus hat.

— Andres

169

Antworten: document.activeElement

---bearbeiten----

Technisch: document.activeElement.blur()

---- edit 2 ----

function onElementFocused(e)
{
    if (e && e.target)
        document.activeElement = e.target == document ? null : e.target;
} 

if (document.addEventListener) 
    document.addEventListener("focus", onElementFocused, true);

— jps
quelle

8

Wenn Firefox 2 mit einem Browseranteil von 0,66% ein Deal Breaker ist ... Ich habe einen Fix, der in meiner bearbeiteten Antwort enthalten ist.

— JPS

20

Im Jahr 2013 liegt der Browseranteil von Firefox 2 deutlich unter 0,66%, und der einfache document.activeElement.blur()Weg ist der beste Weg, um diesen Effekt zu erzielen.

— Chowey

88

.focus()und dann noch .blur()etwas Beliebiges auf Ihrer Seite. Da nur ein Element den Fokus haben kann, wird es auf dieses Element übertragen und dann entfernt.

— Kevin Reid
quelle

Gibt es eine Möglichkeit, ein unsichtbares Element mit Fokus zu erstellen?

— Andres

1

Ich bin kein Experte für den besten Weg, dies zu tun. Sie können es jedoch auch außerhalb des Bildschirms oder außerhalb der Grenzen eines overflow: clipgestalteten Elements positionieren . Sie können jedoch auch ein Feld verwenden, das bereits auf der Seite vorhanden ist. Oder erstellen Sie eine nur für diesen Zweck und entfernen Sie sie erneut.

— Kevin Reid

Ich denke, dass das Setzen des Fokus auf ein Element außerhalb des Bildschirms einen Bildlauf zu diesem Element erzwingen wird. Sie können jedoch zu diesem Zweck ein unsichtbares Element erstellen. Allerdings fällt es einigen Browsern möglicherweise schwer, das Caret zu entfernen. Nur blur () würde wahrscheinlich besser funktionieren. Sie könnten immer noch Schlüssel mit einem Keyup-Ereignishandler (Keydown) erhalten.

— Alexis Wilke

5

Diese Antwort ist veraltet und gilt nicht für das Jahr 2017. Verwenden Sie stattdessen activeElement, wie in stackoverflow.com/a/2520670/39808

— Paul Fisher

Es funktioniert immer noch, nur länger und verschiebt den Fokus (was die TAB-Navigation beeinträchtigen kann). Außerdem ist nicht sofort ersichtlich, was "etwas anderes Beliebiges" sein soll.

— user202729

49

document.activeElement.blur();

Funktioniert in IE9 falsch - es verwischt das gesamte Browserfenster, wenn das aktive Element der Dokumentkörper ist. Besser für diesen Fall zu überprüfen:

if (document.activeElement != document.body) document.activeElement.blur();

— pwnzor1337
quelle

17

Keine der hier angegebenen Antworten ist bei Verwendung von TypeScript vollständig korrekt, da Sie möglicherweise nicht wissen, welche Art von Element ausgewählt ist.

Dies wäre daher vorzuziehen:

if (document.activeElement instanceof HTMLElement)
    document.activeElement.blur();

Ich würde außerdem davon abraten, die in der akzeptierten Antwort angegebene Lösung zu verwenden, da die daraus resultierende Unschärfe nicht Teil der offiziellen Spezifikation ist und jederzeit brechen kann.

— wilcobrouwer
quelle

6

Es macht Spaß zu sehen, wie sich eine Frage, die ich 2010 gestellt habe, immer weiter entwickelt.

— Andres

2

dummyElem.focus () wobei dummyElem ein verstecktes Objekt ist (z. B. einen negativen zIndex hat)?

— Arbeitstier
quelle

0

Sie können window.focus () aufrufen.

Das Verschieben oder Verlieren des Fokus kann jedoch jeden stören, der die Tabulatortaste verwendet, um sich auf der Seite zurechtzufinden.

Sie können auf den Schlüsselcode 13 warten und auf den Effekt verzichten, wenn Sie die Tabulatortaste drücken.

— kennebec
quelle

-3

Mit jQuery ist es einfach: $(this).blur();

— bsbak
quelle

2

Dies ist eine alte Antwort, die Sie vielleicht inzwischen kennen, aber es gibt zwei Gründe, warum diese Antwort nicht zutrifft. 1. Es wird davon ausgegangen, dass das OP jquery verwendet hat. 2. Es thismuss das fokussierte Element sein, während die Frage ausdrücklich besagt, dass das OP das fokussierte Element nicht im Voraus kennt.

— Brandon