onfocusinEreignis

事件对象参考手册Event-Objekt

Beispiele

JavaScript ausführen, wenn ein Eingabefeld den Fokus erhalten soll:

<input type="text" onfocusin="myFunction()">

Selbst ausprobieren »

Weitere Beispiele finden Sie am Ende dieses Kapitels.

Definition und Verwendung

Das onfocusin-Ereignis wird ausgelöst, wenn ein Element kurz davor ist, den Fokus zu erhalten.

Tipp:Das onfocusin-Ereignis ähnelt demonfocus-Ereignis. Der Hauptunterschied besteht darin, dass das onfocus-Ereignis kein Bubbling unterstützt. Wenn Sie also wissen möchten, ob ein Element oder seine untergeordneten Elemente den Fokus erhalten haben, müssen Sie das onfocusin-Ereignis verwenden.

Tipp:Obwohl Firefox das onfocusin-Ereignis nicht unterstützt, können Sie dasonfocus(optionaler Parameter der addEventListener()-MethodeuseCapture) Capture-Listener-Ereignis verwenden, um zu sehen, ob ein Element oder seine untergeordneten Elemente den Fokus erhalten haben.

Tipp:Das entgegengesetzte Ereignis des onfocusin-Ereignisses ist dasonfocusout-Ereignis.

Browser-Unterstützung

Ereignis
onfocusin Ja Ja Nicht unterstützt Ja Ja

Hinweis:In den Browsern Chrome, Safari und Opera 15+ funktioniert das onfocusin-Ereignis bei Verwendung der HTML-DOM-Syntax möglicherweise nicht ordnungsgemäß. Als HTML-Element funktioniert es jedoch ordnungsgemäß, wenn die addEventListener()-Methode verwendet wird.

Syntax

In HTML:

<element onfocusin="myScript">Probieren Sie es selbst aus

In JavaScript (funktioniert möglicherweise nicht ordnungsgemäß in Chrome, Safari und Opera 15+):

object.onfocusin=function(){myScript};Probieren Sie es selbst aus

In JavaScript unter Verwendung der addEventListener()-Methode:

object.addEventListener("focusin", myScript);Probieren Sie es selbst aus

Hinweis:Internet Explorer 8 und frühere IE-Versionen unterstützen dieaddEventListener()Methode nicht.

Technische Details

Blubbert: Ja
Abbrechbar: No
Ereignistyp: FocusEvent
Unterstützte HTML-Tags: Alle HTML-Elemente, außer: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> und <title>

Examples

Weitere Beispiele

Beispiel

Verwenden Sie die Ereignisse "onfocusin" und "onfocusout" zusammen:

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

Selbst ausprobieren »

Beispiel

Ereignisdelegierung: Setzen Sie denuseCapture-Parameter von addEventListener() auf true (für das Erhalten und Verlieren des Fokus):

<form id="myForm">
  <input type="text" id="myInput">
</form>

<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);

function myFocusFunction() {
    document.getElementById("myInput").style.backgroundColor = "yellow";
}

function myBlurFunction() {
    document.getElementById("myInput").style.backgroundColor = "";
}
</script>

Selbst ausprobieren »

Beispiel

Event-Delegation: Verwenden Sie das focusin-Ereignis (in Firefox nicht unterstützt):

<form id="myForm">
  <input type="text" id="myInput">
</form>

<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);

function myFocusFunction() {
    document.getElementById("myInput").style.backgroundColor = "yellow";
}

function myBlurFunction() {
    document.getElementById("myInput").style.backgroundColor = "";
}
</script>

Selbst ausprobieren »

事件对象参考手册Event-Objekt

Andere Erweiterungen