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
optionsOptional-
Ein optionales Objekt zur Steuerung von Aspekten des Fokussierungsvorgangs. Dieses Objekt kann die folgenden Eigenschaften enthalten:
preventScrollOptional-
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
falsefürpreventScroll(der Standardwert) bedeutet, dass der Browser das Element nach dem Fokussieren in den Ansichtsbereich scrollt. WennpreventScrollauftruegesetzt ist, erfolgt kein Scrollen.
Rückgabewert
Keiner (undefined).
Beispiele
>Fokussierung eines SVG-Elements
Dieses Beispiel verwendet einen Button, um den Fokus auf ein SVG-Kreis-Element zu setzen.
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 Sieevent.preventDefault()aufrufen, um zu verhindern, dass der Fokus dasSVGElementverlässt.
Browser-Kompatibilität
Loading…
Siehe auch
SVGElement.blurzum Entfernen des Fokus von einem Element.HTMLElement.focuseine ähnliche Methode für HTML-Elemente.