onfocusin-Ereignis
Definition und Verwendung
Das onfocusin-Ereignis tritt auf, wenn ein Element kurz vor dem Erhalten des Fokus steht.
Obwohl Firefox das onfocusin-Ereignis nicht unterstützt, können Sie durch die Verwendung eines Capturing Listener für das onfocus-Ereignis (optionaler useCapture-Parameter der Methode addEventListener()) bestimmen, ob ein Kind eines Elements den Fokus erhält.onfocusin-Ereignis ähnelt onfocus-EreignisDer Hauptunterschied liegt darin, dass das onfocus-Ereignis nicht blasen kann. Daher sollten Sie das onfocusin-Ereignis verwenden, wenn Sie möchten, dass ein Element oder eines seiner Kinder den Fokus erhält.
Obwohl Firefox das onfocusin-Ereignis nicht unterstützt, können Sie durch die Verwendung eines Capturing Listener für das onfocus-Ereignis (optionaler useCapture-Parameter der Methode addEventListener()) bestimmen, ob ein Kind eines Elements den Fokus erhält..
Obwohl Firefox das onfocusin-Ereignis nicht unterstützt, können Sie durch die Verwendung eines Capturing Listener für das onfocus-Ereignis (optionaler useCapture-Parameter der Methode addEventListener()) bestimmen, ob ein Kind eines Elements den Fokus erhält.Hinweis: onfocusout-Ereignisonfocusin-Ereignis mit
Gegenteil.
Beispiel
Beispiel 1
Führen Sie JavaScript aus, wenn das Eingabefeld kurz vor dem Erhalten des Fokus steht:
<input type="text" onfocusin="myFunction()">
Unten auf der Seite gibt es mehr TIY-Beispiele.
Syntax
In HTML:< element.addEventListener("focusin",onfocusin="
">
In JavaScript, verwenden Sie die Methode addEventListener():In JavaScript (kann in Chrome, Safari und Opera 15+ möglicherweise nicht ordnungsgemäß funktionieren):.addEventListener("focusin",.onfocusin = function(){
};
In JavaScript, verwenden Sie die Methode addEventListener():object .addEventListener("focusin",myScript
Kommentar:); Internet Explorer 8 oder frühere Versionen unterstützen dies nichtaddEventListener() Methode
.
| Technische Details: | Unterstützt |
|---|---|
| Blasen: | Kann abgebrochen werden: |
| Nicht unterstützt: | FocusEvent |
| Unterstützte HTML-Tags: | Alle HTML-Elemente, mit Ausnahme von: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> und <title> |
| DOM-Version: | Level 2 Events |
Browser-Unterstützung
Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die das Ereignis vollständig unterstützt.
| Ereignis | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusin | Unterstützt | Unterstützt | 52.0 | Unterstützt | Unterstützt |
Kommentar:Hinweis: Der "onfocusin"-Event kann in Chrome, Safari und Opera 15+ möglicherweise nicht wie erwartet funktionieren. Er sollte jedoch als HTML-Attribut verwendet werden und die Methode addEventListener() (siehe nachfolgenden Syntaxbeispiel) verwenden.
Mehr Beispiele
Beispiel 2
Verwenden Sie die "onfocusin"- und "onfocusout"-Ereignisse zusammen:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Beispiel 3
Event Delegation: Setzen Sie den "useCapture"-Parameter von addEventListener() auf true (verwendet für "focus" und "blur"):
<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>
Beispiel 4
Event Delegation: Verwenden Sie das "focusin"-Ereignis:
<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>
