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 January 2020.

Die SVGElement.focus()-Methode setzt den Fokus auf das angegebene SVG-Element, sofern es fokussiert werden kann. Das fokussierte Element ist das Element, das standardmäßig Tastatur- und ähnliche Ereignisse empfängt.

Standardmäßig wird der Browser das Element nach dem Fokussieren in den sichtbaren Bereich scrollen und möglicherweise eine sichtbare Kennzeichnung des fokussierten Elements bereitstellen (typischerweise durch die Anzeige eines "Fokusrings" um das Element). Parameteroptionen werden bereitgestellt, um das automatische Scrollen zu deaktivieren und eine sichtbare Kennzeichnung auf Elementen zu erzwingen.

Syntax

js
focus()
focus(options)

Parameter

options Optional

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

Rückgabewert

Keiner (undefined).

Beispiele

Fokussieren eines SVG-Elements

Dieses Beispiel verwendet eine Schaltfläche, um den Fokus auf ein SVG-Kreis-Element zu setzen.

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

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

Spezifikationen

Specification
HTML
# dom-focus-dev

Hinweise

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
focus
options.preventScroll parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch