SVGElement: focus() method

Syntax

focus()
focus(options)

Parameters

options Optional

An optional object for controlling aspects of the focusing process. This object may contain the following properties:

preventScroll Optional

A boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. A value of false for preventScroll (the default) means that the browser will scroll the element into view after focusing it. If preventScroll is set to true, no scrolling will occur.

Return value

None (undefined).

Examples

Focusing an SVG element

This example uses a button to set the focus on an SVG circle element.

HTML

<svg xmlns="https://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();
});

Specifications

Notes

• If you call SVGElement.focus() from a mousedown event handler, you must call event.preventDefault() to keep the focus from leaving the SVGElement

Browser compatibility

See also

• SVGElement.blur to remove the focus from an element.
• HTMLElement.focus a similar method for HTML elements.