Événement onfocusin

Événements DOM FocusEvent

Définition et utilisation

L'événement onfocusin se produit lorsque l'élément va obtenir le focus.

Bien que Firefox ne prenne pas en charge l'événement onfocusin, vous pouvez déterminer si un élément ou un de ses éléments enfants obtient le focus en utilisant un écouteur d'événement de capture pour l'événement onfocus (en utilisant le paramètre optionnel useCapture de la méthode addEventListener()).L'événement onfocusin est similaire à Événement onfocusLa principale différence réside dans le fait que l'événement onfocus ne bubbling pas. Par conséquent, si vous souhaitez savoir si un élément ou l'un de ses éléments enfants obtient le focus, vous devez utiliser l'événement onfocusin.

Bien que Firefox ne prenne pas en charge l'événement onfocusin, vous pouvez déterminer si un élément ou un de ses éléments enfants obtient le focus en utilisant un écouteur d'événement de capture pour l'événement onfocus (en utilisant le paramètre optionnel useCapture de la méthode addEventListener())..

Bien que Firefox ne prenne pas en charge l'événement onfocusin, vous pouvez déterminer si un élément ou un de ses éléments enfants obtient le focus en utilisant un écouteur d'événement de capture pour l'événement onfocus (en utilisant le paramètre optionnel useCapture de la méthode addEventListener()).Avis : Événement onfocusoutL'événement onfocusin est similaire à

Au contraire.

Instance

Exemple 1

Exécutez JavaScript lorsque le champ de saisie va obtenir le focus :

Essayer par vous-même

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

Des exemples TIY supplémentaires sont disponibles en bas de la page.

Syntaxe

Dans HTML :< element.addEventListener("focusin",onfocusin="

Essayer par vous-même

">

Dans JavaScript, utilisez la méthode addEventListener() :Dans JavaScript (peut ne pas fonctionner correctement dans Chrome, Safari et Opera 15+):.addEventListener("focusin",.onfocusin = function(){

Essayer par vous-même

};

Dans JavaScript, utilisez la méthode addEventListener() :object .addEventListener("focusin",myScript

Essayer par vous-même

Commentaire :); Internet Explorer 8 ou versions antérieures ne prennent pas en chargeméthode addEventListener()

.

Détails techniques : Support
Bubbling : Annulable :
Non pris en charge : FocusEvent
Balises HTML prises en charge : Tous les éléments HTML, à l'exception de : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title>
Version DOM : Événements de niveau 2

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur la première à soutenir cet événement.

Événement Chrome IE Firefox Safari Opera
onfocusin Support Support 52.0 Support Support

Commentaire :Remarque : dans Chrome, Safari et Opera 15+ et au-delà, l'événement onfocusin peut ne pas fonctionner comme prévu avec la syntaxe JavaScript HTML DOM. Cependant, il doit être utilisé comme attribut HTML et avec la méthode addEventListener() (voir les exemples de syntaxe ci-dessous).

Plus d'exemples

Exemple 2

Utilisation conjointe des événements "onfocusin" et "onfocusout" :

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

Essayer par vous-même

Exemple 3

Délégation d'événements : définir le paramètre useCapture de addEventListener() sur true (utilisé pour focus et 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>

Essayer par vous-même

Exemple 4

Délégation d'événements : utilisation de l'événement focusin :

<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>

Essayer par vous-même

Événements DOM FocusEvent