focus trap javascript

`focus trap javascript`: Fokus darf kreisen, nie feststecken.

Testen Sie Tab, Shift+Tab, Escape, Fokus-Rückgabe und dynamische Controls in einem echten Dialog.

Fokuspfad-Labor

Dialogvertrag unter Last

4/4

VerhaltenTABTab bleibt im DialogESCEscape schließtRETFokus kehrt zurückDOMControls live ermittelt

Aktiv: Öffner

1E-Mail
2Hinweis
3Abbrechen
4Speichern

Fokusspur

Öffner

JavaScript-Ausgabe

const focusable = 'button:not([disabled]), input:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])';
const opener = document.querySelector('#open');
const dialog = document.querySelector('#dialog');


dialog.addEventListener('keydown', event => {
  if (event.key === 'Tab') {
    const items = [...dialog.querySelectorAll(focusable)];
    const edge = event.shiftKey ? items[0] : items.at(-1);
    if (document.activeElement === edge) {
      event.preventDefault();
      items[event.shiftKey ? items.length - 1 : 0].focus();
    }
  }
  if (event.key === 'Escape') dialog.close();
});
dialog.addEventListener('close', () => opener.focus());