onfocus Ereignis

DOM-Ereignisse FocusEvent

Definition und Verwendung

Das Ereignis onfocus tritt ein, wenn ein Element fokussiert wird.

am häufigsten mit <input>, <select> und <a> verwendet.

Hinweis: Das Ereignis onfocus wird mit onblur-Ereignisumgekehrt.

Hinweis: Das Ereignis onfocus ähnelt onfocusin-Ereignis. Der Hauptunterschied besteht darin, dass das onfocus-Ereignis nicht bubbling ist. Daher kannst du das Ereignis onfocusin verwenden, um zu bestimmen, ob ein Element oder eines seiner Kinder fokussiert ist. Du kannst jedoch das Ereignis onfocus verwenden, um addEventListener() Methodevon useCapture dies zu erreichen. Parameter

Beispiel

Beispiel 1

Führe JavaScript aus, wenn das Eingabefeld fokussiert wird:

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

Selbst ausprobieren

Unten auf der Seite gibt es mehr TIY-Beispiele.

Syntax

In HTML:

<element onfocus="myScript">

Selbst ausprobieren

In JavaScript:

object.onfocus = function(){myScript};

Selbst ausprobieren

In JavaScript wird die Methode addEventListener() verwendet:

object.addEventListener("focus", myScript);

Selbst ausprobieren

Anmerkung:Internet Explorer 8 oder frühere Versionen unterstützen dies nicht addEventListener() Methode。

Technische Details

Blasen: Nicht unterstützt
Kann abgebrochen werden: Nicht unterstützt
Event-Typ: 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

Event Chrome IE Firefox Safari Opera
onfocus Unterstützt Unterstützt Unterstützt Unterstützt Unterstützt

Mehr Beispiele

Beispiel 2

Verwenden Sie die "onfocus"- und "onblur"-Events zusammen:

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

Selbst ausprobieren

Beispiel 3

Leeren Sie das fokussierte Eingabefeld:

<!-- Wenn das Eingabefeld den Fokus erhält, wird sein aktueller Wert durch eine leere Zeichenfolge ersetzt -->
<input type="text" onfocus="this.value=''" value="Blabla">

Selbst ausprobieren

Beispiel 4

Event Delegation: Setzen Sie den useCapture-Parameter 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>

Selbst ausprobieren

Beispiel 5

Event Delegation: Verwenden Sie das "focusin"-Event (nicht unterstützt von Firefox):

<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

DOM-Ereignisse FocusEvent