JavaScript/DOM/HTMLOrSVGElement/focus

Der Begriff Focus ist mehrdeutig.
Weitere Bedeutungen von focus finden Sie unter Focus

Die Methode focus() setzt den Cursor bzw. den Fokus auf das betreffende HTML- oder SVG-Element. Voraussetzung dafür ist, dass dieses Element fokussierbar ist. Das ist typischerweise für Eingabelemente in Formularen der Fall, oder bei Elementen, für die ein tabindex gesetzt ist.

Syntax

attribut = element.focus();

Die Methode erwartet keine Parameter.

Anwendungsbeispiel ansehen …

In welchem Jahr starb Goethe? <br>
<label for="Todesjahr">Todesjahr:</label>
<input type="number" id="Todesjahr" autofocus><br>
<button id="setFocus">Ändere Focus!</button>
<button id="check">Überprüfe!</button>

<p><output></output></p>

JavaScript:

document.querySelector('#setFocus')
        .addEventListener('click', () => setFocusToId('check'));
document.querySelector('#check')
        .addEventListener('click', checkYear); 	 

function setFocusToId(id) {  
  document.getElementById(id).focus();
}
	
function checkYear() {
  let message;
  if (document.getElementById('Todesjahr').value == 1832) { 
    message = 'Bravo!';
  } else {
    message = 'Sie wissen es einfach nicht!';
    setFocusToId('Todesjahr');
  }
  document.querySelector('output').textContent = message;
}

Das Beispiel enthält ein Eingabefeld mit der Id Todesjahr, dem mit dem autofocus-Attribut der Fokus zugewiesen wird.

Außer dem Eingabefeld gibt es zwei Buttons. Beim Klick auf den Button "Ändere Fokus!" wird die Funktion setFocusToId() aufgerufen, die dem Element mit der übergebenen Id den Fokus zuweist. In diesem click-Eventhandler wird "check" übergeben, der Focus also auf den "Überprüfe" Button gesetzt.

Bei einem Klick auf den Überprüfe-Button wird die Funktion checkYear() aufgerufen. Sie überprüft in einer If-Abfrage, ob der eingegebene Wert dem Todesjahr entspricht. Eine Meldung, ob die Antwort stimmt, wird in der Variablen message abgelegt.
Falls der Wert nicht korrekt ist, wird - wieder mit Hilfe von setFocusToId - zusätzlich der Fokus auf das Eingabeelement zurückgesetzt.
Die (Miss-)Erfolgsmeldung wird anschließend als textContent in das output-Element geschrieben.

Beachten Sie: In der Vorschau und im Frickl-Modus funktioniert das autofocus-Attribut nicht; wenn Sie das Beispiel in einem neuen Tab öffnen, schon.

Weblinks

• W3C: DOM Focus
• MDN: Element.focus