Focus

Detecting the focused element

Wir können immer nur jeweils ein Element fokussieren. Visuell können wir das fokussierte Element am Rahmen erkennen. In JavaScript können wir das fokussierte Element mit document.activeElement bestimmen.

<button>Button</button>
<a href="#">Link</a>

const btn = document.querySelector('button');
const link = document.querySelector('a');

function log(event) {
  console.log(document.activeElement);
}

btn.addEventListener('click', log);
link.addEventListener('click', log);

Um dieses Verhalten zwischen den Browsern konsistent zu halten, kann man folgenden Code am Anfang eines Scripts einfügen:

document.addEventListener('click', event => {
  if (event.target.matches('button')) {
    event.target.focus();
  }
});

Detecting the focused element automatically

In den Chrome Devtools können wir mit Live Expression mitverfolgen, welches Element gerade fokussiert ist.

Chrome Devtools öffnen
auf Console klicken
auf das Auge klicken -> ein Input-Feld mit “Expression” erscheint
statt “Expression” nun den gewünschten Ausdruck einfügen -> in dem Fall ist das document.activeElement
das document.activeElement wird nun in der Zeile darunter angezeigt und ändert sich automatisch