HTMLElement: focus()-Methode

options Optional

Ein optionales Objekt, um Aspekte des Fokussierungsprozesses zu steuern. Dieses Objekt kann die folgenden Eigenschaften enthalten:

preventScroll Optional

Ein boolescher Wert, der angibt, ob der Browser das Dokument scrollen soll, um das neu fokussierte Element sichtbar zu machen. Ein Wert von false für preventScroll (Standard) bedeutet, dass der Browser nach dem Fokussieren zum Element scrollt. Wenn preventScroll auf true gesetzt ist, erfolgt kein Scrollen.

focusVisible Optional Experimentell

Ein boolescher Wert, der auf true gesetzt werden soll, um eine sichtbare Hervorhebung zu erzwingen, oder auf false, um eine sichtbare Hervorhebung zu verhindern. Wenn die Eigenschaft nicht angegeben ist, sorgt der Browser für eine sichtbare Hervorhebung, wenn dies die Zugänglichkeit für Benutzer verbessert.

Keiner (undefined).

Dieses Beispiel verwendet eine Schaltfläche, um den Fokus auf ein Textfeld zu setzen.

HTML

<input id="myTextField" value="Text field." />
<button id="focusButton">Click to set focus on the text field</button>

JavaScript

Der unten stehende Code fügt einen Ereignishandler hinzu, um den Fokus auf das Textfeld zu setzen, wenn die Schaltfläche gedrückt wird. Beachten Sie, dass die meisten Browser automatisch eine sichtbare Hervorhebung (einen "Fokusring") für ein fokussiertes Textfeld hinzufügen. Daher legt der Code focusVisible nicht auf true fest.

document.getElementById("focusButton").addEventListener("click", () => {
  document.getElementById("myTextField").focus();
});

Ergebnis

Wählen Sie die Schaltfläche aus, um den Fokus auf das Textfeld zu setzen.

Dieses Beispiel zeigt, wie Sie den Fokus auf ein Schaltflächenelement setzen können.

HTML

Zuerst definieren wir drei Schaltflächen. Sowohl die mittlere als auch die rechte Schaltfläche setzen den Fokus auf die linke Schaltfläche. Die rechte Schaltfläche legt zusätzlich focusVisible fest.

<button id="myButton">Button</button>
<button id="focusButton">Click to set focus on "Button"</button>
<button id="focusButtonVisibleIndication">
  Click to set focus and focusVisible on "Button"
</button>

JavaScript

Der unten stehende Code richtet Ereignishandler für Klickereignisse auf der mittleren und rechten Schaltfläche ein.

document.getElementById("focusButton").addEventListener("click", () => {
  document.getElementById("myButton").focus();
});

document
  .getElementById("focusButtonVisibleIndication")
  .addEventListener("click", () => {
    document.getElementById("myButton").focus({ focusVisible: true });
  });

Ergebnis

Wählen Sie entweder die mittlere oder die rechte Schaltfläche aus, um den Fokus auf die linke Schaltfläche zu setzen.

Browser zeigen normalerweise keine sichtbare Fokusanzeige auf Schaltflächenelementen, wenn der Fokus programmgesteuert gesetzt wird, daher ist die Wirkung durch Auswahl der mittleren Schaltfläche möglicherweise nicht offensichtlich. Wenn jedoch die Option focusVisible in Ihrem Browser unterstützt wird, sollten Sie sehen, wie sich der Fokus auf die linke Schaltfläche ändert, wenn die rechte Schaltfläche ausgewählt wird.

Dieses Beispiel zeigt die Wirkung des Fokussierens mit der Option preventScroll auf true und false (Standardwert).

HTML

Das HTML definiert zwei Schaltflächen, die verwendet werden, um den Fokus auf eine dritte, außerhalb des sichtbaren Bereichs befindliche Schaltfläche zu setzen.

<button id="focus_scroll">Click to set focus on off-screen button</button>
<button id="focus_no_scroll">
  Click to set focus on offscreen button without scrolling
</button>

<div id="container">
  <button id="myButton" style="margin-top: 500px;">Button</button>
</div>

JavaScript

Dieser Code setzt einen Klick-Ereignishandler für die erste und zweite Schaltfläche, um den Fokus auf die letzte Schaltfläche zu setzen. Beachten Sie, dass der erste Handler die Option preventScroll nicht angibt, sodass zum fokussierten Element gescrollt wird.

document.getElementById("focus_scroll").addEventListener("click", () => {
  document.getElementById("myButton").focus(); // default: {preventScroll:false}
});

document.getElementById("focus_no_scroll").addEventListener("click", () => {
  document.getElementById("myButton").focus({ preventScroll: true });
});

Ergebnis

Wählen Sie die erste Schaltfläche aus, um den Fokus zu setzen und zur außerhalb des sichtbaren Bereichs befindlichen Schaltfläche zu scrollen. Wählen Sie die zweite Schaltfläche aus, um den Fokus zu setzen, ohne zu scrollen.

• Wenn Sie HTMLElement.focus() aus einem mousedown-Ereignishandler aufrufen, müssen Sie event.preventDefault() aufrufen, um zu verhindern, dass der Fokus das HTMLElement verlässt.
• Das Verhalten des Fokus in Bezug auf verschiedene HTML-Funktionen wie tabindex oder den Shadow DOM, die zuvor ungenau spezifiziert waren, wurde im Oktober 2019 aktualisiert. Weitere Informationen finden Sie im WHATWG-Blog.

• HTMLElement.blur, um den Fokus von einem Element zu entfernen.
• document.activeElement, um zu wissen, welches Element derzeit fokussiert ist.