SVGElement: метод focus()

Метод SVGElement.focus() устанавливает фокус на указанный SVG-элемент, если это возможно. Элемент с фокусом — это элемент, который по умолчанию получит события клавиатуры и аналогичные события.

По умолчанию браузер прокрутит элемент в область видимости после установки фокуса, и он также может отобразить визуальное указание на фокусированный элемент (обычно, путем отображения «фокусной рамки» вокруг элемента). Для отключения стандартной прокрутки и принудительного отображения визуального указания на элементах доступны параметры.

options Необязательно

Необязательный объект для управления аспектами процесса установки фокуса. Этот объект может содержать следующие свойства:

preventScroll Необязательно

Булево значение, указывающее, следует ли браузеру прокручивать документ, чтобы поместить недавно фокусированный элемент в область видимости. Значение false для preventScroll (по умолчанию) означает, что браузер прокрутит элемент в область видимости после установки фокуса. Если preventScroll установлено в значение true, прокрутка не будет выполняться.

None (undefined).

В этом примере используется кнопка для установки фокуса на элемент SVG типа circle.

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();
});

• Если вы вызываете SVGElement.focus() из обработчика события mousedown, необходимо вызвать event.preventDefault() для предотвращения ухода фокуса с SVGElement

• SVGElement.blur для снятия фокуса с элемента.
• HTMLElement.focus аналогичный метод для HTML-элементов.