HTMLElement: focus() Methode

options Optional

Ein optionales Objekt zur Steuerung von Aspekten des Fokussierungsprozesses. Dieses Objekt kann folgende Eigenschaften enthalten:

preventScroll Optional

Ein boolescher Wert, der angibt, ob der Browser das Dokument scrollen soll, um das neu fokussierte Element in den sichtbaren Bereich zu bringen oder nicht. Ein Wert von false für preventScroll (standardmäßig) bedeutet, dass der Browser das Element nach dem Fokussieren in den sichtbaren Bereich scrollt. Wenn preventScroll auf true gesetzt ist, erfolgt kein Scrollen.

focusVisible Optional Experimentell

Ein boolescher Wert, der auf true gesetzt werden sollte, um die sichtbare Hervorhebung des fokussierten Elements zu erzwingen, oder auf false, um dies zu verhindern. Wenn die Eigenschaft nicht angegeben ist, liefert der Browser eine sichtbare Hervorhebung, wenn festgestellt wird, dass dies die Zugänglichkeit für Benutzer verbessern würde.

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 folgende 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, sodass der Code focusVisible nicht auf true setzt.

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 demonstriert, wie man den Fokus auf ein Schaltflächenelement setzen kann.

HTML

Zuerst definieren wir drei Schaltflächen. Sowohl die mittlere als auch die rechte Schaltfläche setzen den Fokus auf die linkeste Schaltfläche. Die ganz rechte Schaltfläche wird ebenfalls focusVisible angeben.

<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 folgende Code richtet Ereignishandler für Klickereignisse auf die mittleren und rechten Schaltflächen 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 Schaltfläche oder die ganz rechte Schaltfläche, um den Fokus auf die linkeste Schaltfläche zu setzen.

Browser zeigen normalerweise keine sichtbare Fokushervorhebung auf Schaltflächenelementen, wenn der Fokus programmgesteuert gesetzt wird, sodass der Effekt des Auswählens der mittleren Schaltfläche möglicherweise nicht offensichtlich ist. Wenn die focusVisible-Option jedoch von Ihrem Browser unterstützt wird, sollten Sie den Fokuswechsel auf die linkeste Schaltfläche sehen, wenn die ganz rechte Schaltfläche ausgewählt wird.

Dieses Beispiel zeigt den Effekt des Setzens des Fokus mit der Option preventScroll, die auf true und false (standardmäßig) gesetzt ist.

HTML

Das HTML definiert zwei Schaltflächen, die verwendet werden, um den Fokus auf eine dritte Schaltfläche zu setzen, die nicht im sichtbaren Bereich ist

<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">Button</button>
</div>

#myButton {
  margin-top: 500px; /* Push the button off-screen */
}

JavaScript

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

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, um den Fokus zu setzen und zur nicht sichtbaren Schaltfläche zu scrollen. Wenn Sie die zweite Schaltfläche auswählen, wird der Fokus gesetzt, das Scrollen ist jedoch deaktiviert.

• Wenn Sie HTMLElement.focus() von einem mousedown-Ereignishandler aus aufrufen, müssen Sie event.preventDefault() aufrufen, um zu verhindern, dass der Fokus vom HTMLElement abwandert.
• Das Verhalten des Fokus in Bezug auf verschiedene HTML-Funktionen wie tabindex oder shadow dom, die zuvor unzureichend spezifiziert waren, wurden 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 momentan fokussiert ist.