SVGElement: focus() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

Die SVGElement.focus() Methode setzt den Fokus auf das angegebene SVG-Element, wenn es fokussierbar ist. Das fokussierte Element ist das Element, das standardmäßig Tastatur- und ähnliche Ereignisse erhält.

Standardmäßig scrollt der Browser das Element nach dem Fokussieren in den Ansichtsbereich, und er kann auch eine sichtbare Hervorhebung des fokussierten Elements bereitstellen (typischerweise durch das Anzeigen eines "Fokus-Rings" um das Element). Parameteroptionen werden bereitgestellt, um das standardmäßige Scrollen zu deaktivieren und eine sichtbare Hervorhebung auf Elementen zu erzwingen.

Syntax

focus()
focus(options)

Parameter

options Optional

Ein optionales Objekt zur Steuerung von Aspekten des Fokussierungsvorgangs. 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 in den Ansichtsbereich zu bringen. Ein Wert von false für preventScroll (der Standardwert) bedeutet, dass der Browser das Element nach dem Fokussieren in den Ansichtsbereich scrollt. Wenn preventScroll auf true gesetzt ist, erfolgt kein Scrollen.

HTML

html

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="50" tabindex="0" fill="blue" />
  <button id="focusButton">Focus the circle</button>
</svg>

JavaScript

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

Spezifikationen

Specification
HTML # dom-focus-dev

Hinweise

Wenn Sie SVGElement.focus() von einem mousedown Event-Handler aus aufrufen, müssen Sie event.preventDefault() aufrufen, um zu verhindern, dass der Fokus das SVGElement verlässt.

Browser-Kompatibilität

Siehe auch

SVGElement.blur zum Entfernen des Fokus von einem Element.
HTMLElement.focus eine ähnliche Methode für HTML-Elemente.