Skip to main content

focus

Focus management helpers for moving focus to the first, last, next, or previous focusable element within a container, or to a specific element by selector.

Import: @rtorcato/browser-common/focus

📖 MDN: HTMLElement.focus()

Browser support​

APIChromeEdgeFirefoxSafariiOS SafariBaseline
HTMLElement.focus✅ 1+✅ 12+✅ 1.5+✅ 3+✅ 1+ [1]Widely available
Document.activeElement✅ 2+✅ 12+✅ 3+✅ 7+✅ 7+Widely available
  1. iOS Safari: If there's no hardware keyboard connected and the user has not yet interacted with the page, then calling focus() on an <input> element has no effect (for example, the element does not match the :focus selector).

✅ supported · ◐ partial · ❌ not supported · [n] see note. Generated from MDN browser-compat-data and web-features. caniuse: HTMLElement.focus · Document.activeElement

Example​

import { focusFirst, focusNext, focusBySelector } from '@rtorcato/browser-common/focus'

// open a dialog and focus its first focusable element
focusFirst(dialog)

// advance focus within a form on Tab-like custom navigation
focusNext(form)

// jump straight to a known field
focusBySelector(form, 'input[name="email"]')

Exports​

  • focusFirst(container) — focuses the first focusable element in container
  • focusLast(container) — focuses the last focusable element in container
  • focusNext(container) — focuses the element after the currently focused one
  • focusPrev(container) — focuses the element before the currently focused one
  • focusBySelector(container, selector) — focuses the element matching selector

See the API reference for full signatures.