JavaScript/DOM/HTMLOrSVGElement/focus

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Titel dieses Artikels 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.

  • DOM 1.0
  • JavaScript 1.1
  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera

Syntax

attribut = element.focus();

Die Methode erwartet keine Parameter.

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
	document.querySelector('#setFocus').addEventListener('click', setFocus);
	document.querySelector('#check').addEventListener('click', checkYear); 	 

	function setFocus() {  
		document.getElementById("check").focus();
	}
	
	function checkYear() {
		var message;
		if (document.getElementById('Todesjahr').value == 1832) { 
        	message = 'Bravo!';
      } else {
	        message = 'Sie wissen es einfach nicht!';
			document.getElementById("Todesjahr").focus();
      }
	  document.querySelector('output').innerHTML = message;
    }
Das Beispiel enthält ein Eingabefeld, dem mit dem autofocus-Attribut der Fokus zugewiesen wird.

Neben dem Eingabefeld gibt es zwei Buttons. Beim Klick auf den Button "Ändere Fokus!" wird die Funktion setFocus() aufgerufen, die dem Button "Überprüfe" den Fokus zuweist.
Bei einem Klick auf diesen Button mit der id check wird die Funktion checkYear() aufgerufen. Sie überprüft in einer If-Abfrage, ob der eingegebene Wert dem Todesjahr entspricht. Fall der eingegebene Wert richtig ist, wird ein ensprechender Text der Variable message zugewiesen.
Falls der Wert nicht korrekt ist, wird erneut dem Eingabeelement der Fokus zugewiesen.

Die (Miss-)Erfolgsmeldung wird anschließend im output-Element ausgegeben.

{{Beachten|Im Frickl-Modus funktioniert das autofocus-Attribut nicht; wenn Sie das Beispiel in einem neuen Tab öffnen, schon.


Weblinks[Bearbeiten]