Beispiel
Führen Sie einen JavaScript, wenn ein Eingabefeld den Fokus erhält:
<input type="text"
onfocus="myFunction()"> Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die onfocus-Ereignis tritt ein, wenn ein Element den Fokus erhält.
Das onfocus - Ereignis wird am häufigsten mit <input>, <select> und verwendet <a> .
Tip: Das onfocus - Ereignis ist das Gegenteil von dem onblur Ereignisse.
Tipp: Das onfocus - Ereignis ähnelt dem onfocusin Ereignis. Der wesentliche Unterschied besteht darin, dass das onfocus-Ereignis nicht Blase. Deshalb, wenn Sie ein Element oder sein Kind herausfinden wollen, ob den Fokus erhält, könnten Sie das onfocusin Ereignis verwenden. Allerdings können Sie dies erreichen , indem Sie den optionalen Parameter useCapture der mit addEventListener() Methode für das onfocus - Ereignis.
Browser-Unterstützung
| Event | |||||
|---|---|---|---|---|---|
| onfocus | Ja | Ja | Ja | Ja | Ja |
Syntax
In HTML:
In JavaScript:
object .onfocus=function(){ Versuch es selber " In JavaScript mit den addEventListener() Methode:
object .addEventListener("focus", myScript );
Versuch es selber " Hinweis: Die addEventListener() Methode wird nicht unterstützt in Internet Explorer 8 und früheren Versionen.
Technische Details
| Blasen: | Nein |
|---|---|
| Es fällt eine Pauschale: | Nein |
| Event-Typ: | Focus |
| Unterstützte HTML-Tags: | Alle HTML - Elemente, AUSSER: <base>, <bdo>, in , <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> und <title> |
| DOM Version: | Level 2 Veranstaltungen |
Mehr Beispiele
Beispiel
Mit "onfocus" zusammen mit dem "onblur" Event:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Versuch es selber " Beispiel
Ereignis Delegation: die useCapture Parameter der Einstellung 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>
Versuch es selber " Beispiel
Event-Delegation: das focusin Ereignis (nicht von Firefox 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>
Versuch es selber " <Ereignisobjekt