Recommandation de cours :

Événements DOM FocusEvent

l'événement onfocus

Définition et utilisation

l'événement onfocus se produit lorsque l'élément obtient le focus.

Astuce : l'événement onfocus est souvent utilisé avec Événement onblurà l'inverse.

Astuce : l'événement onfocus est similaire à Événement onfocusin. La principale différence réside dans le fait que l'événement onfocus ne bubbling. Par conséquent, si vous souhaitez déterminer si un élément ou l'un de ses éléments enfants a obtenu le focus, vous pouvez utiliser l'événement onfocusin. Cependant, vous pouvez utiliser l'événement onfocus pour méthode addEventListener()de useCapture paramètres pour réaliser cela.

Instance

Exemple 1

Exécutez JavaScript lorsque le champ d'entrée obtient le focus :

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

Essayez vous-même

Vous trouverez plus d'exemples TIY en bas de la page.

Syntaxe

Dans HTML :

<element onfocus="myScript">

Essayez vous-même

Dans JavaScript :

object.onfocus = function() {myScript};

Essayez vous-même

Dans JavaScript, utilisez la méthode addEventListener() :

object.addEventListener("focus", myScript);

Essayez vous-même

Remarque :Internet Explorer 8 ou versions antérieures ne prennent pas en charge méthode addEventListener()。

Détails techniques

Bubbling : Non supporté
Annulable : Non supporté
Type d'événement : FocusEvent
Balises HTML supportées : Tous les éléments HTML, sauf : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title>
Version DOM : Événements de niveau 2

Support du navigateur

Événement Chrome IE Firefox Safari Opera
onfocus Support Support Support Support Support

Plus d'exemples

Exemple 2

Utiliser les événements onfocus et onblur ensemble :

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

Essayez vous-même

Exemple 3

Effacer le champ de saisie qui a le focus :

<!-- Remplacez la valeur actuelle du champ de saisie par une chaîne vide lorsque le champ de saisie obtient le focus -->
<input type="text" onfocus="this.value=''" value="Blabla">

Essayez vous-même

Exemple 4

Proxy de événement : définir le paramètre useCapture de addEventListener() sur 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>

Essayez vous-même

Exemple 5

Proxy de événement : utilisation de l'événement focusin (non supporté par 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>

Essayez vous-même

Événements DOM FocusEvent