onfocus- Ereignis
Beispiel
Führen Sie ein JavaScript aus, wenn ein Eingabefeld den Fokus erhält:
<input type="text"
onfocus="myFunction()">
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Das onfocus-Ereignis tritt auf, wenn ein Element den Fokus erhält.
Das onfocus-Ereignis wird am häufigsten mit <input>, <select> und <a> verwendet.
Tipp: Das onfocus-Ereignis ist das Gegenteil des onblur- Ereignisses.
Tipp: Das onfocus-Ereignis ähnelt dem onfocusin- Ereignis. Der Hauptunterschied besteht darin, dass das onfocus-Ereignis nicht sprudelt. Wenn Sie also herausfinden möchten, ob ein Element oder sein untergeordnetes Element den Fokus erhält, können Sie das Ereignis onfocusin verwenden. Sie können dies jedoch erreichen, indem Sie den optionalen Parameter useCapture der Methode addEventListener() für das Ereignis onfocus verwenden.
Browser-Unterstützung
Event | |||||
---|---|---|---|---|---|
onfocus | Yes | Yes | Yes | Yes | Yes |
Syntax
Im HTML-Format:
<element onfocus="myScript">
In JavaScript:
object.onfocus = function(){myScript};
Verwenden Sie in JavaScript die Methode addEventListener():
object.addEventListener("focus", myScript);
Hinweis: Die Methode addEventListener() wird in Internet Explorer 8 und früheren Versionen nicht unterstützt.
Technische Details
Bläschen: | Nein |
---|---|
kündbar: | Nein |
Ereignistyp: | FocusEvent |
Unterstützte HTML-Tags: | ALLE HTML-Elemente, AUSSER: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> und <title> |
DOM-Version: | Ereignisse der Ebene 2 |
Mehr Beispiele
Beispiel
Verwendung von "onfocus" zusammen mit dem "onblur"-Ereignis:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Beispiel
Eingabefeld bei Fokus löschen:
<!-- When the input field gets focus, replace its current value with an
empty string -->
<input type="text" onfocus="this.value=''" value="Blabla">
Beispiel
Ereignisdelegierung: Setzen des useCapture- Parameters von addEventListener() auf true:
<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
Ereignisdelegierung: Verwendung des Focusin-Ereignisses (wird von 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>