onfocusin Événement
Exemple
Exécutez un JavaScript lorsqu'un champ de saisie est sur le point d'obtenir le focus :
<input type="text"
onfocusin="myFunction()">
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
L'événement onfocusin se produit lorsqu'un élément est sur le point d'obtenir le focus.
Conseil : L'événement onfocusin est similaire à l' événement onfocus . La principale différence est que l'événement onfocus ne bouillonne pas. Par conséquent, si vous souhaitez savoir si un élément ou son enfant obtient le focus, vous devez utiliser l'événement onfocusin.
Conseil : L'événement onfocusin est l'opposé de l' événement onfocusout .
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'événement.
Event | |||||
---|---|---|---|---|---|
onfocusin | Yes | Yes | 52.0 | Yes | Yes |
Remarque : L'événement onfocusin peut ne pas fonctionner comme prévu dans Chrome, Safari et Opera 15+ en utilisant la syntaxe JavaScript HTML DOM. Cependant, il devrait fonctionner comme un attribut HTML et en utilisant la méthode addEventListener() (Voir les exemples de syntaxe ci-dessous).
Syntaxe
En HTML :
<element onfocusin="myScript">
En JavaScript (peut ne pas fonctionner comme prévu dans Chrome, Safari et Opera 15+) :
object.onfocusin = function(){myScript};
En JavaScript, en utilisant la méthode addEventListener() :
object.addEventListener("focusin", myScript);
Remarque : La méthode addEventListener() n'est pas prise en charge dans Internet Explorer 8 et les versions antérieures.
Détails techniques
Bulles: | Oui |
---|---|
Annulable : | Non |
Type d'événement: | FocusEvent |
Balises HTML compatibles : | 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 |
Plus d'exemples
Exemple
Utilisation de "onfocusin" avec l'événement "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Exemple
Délégation d'événement : définition du paramètre useCapture de addEventListener() sur true (pour le focus et le flou) :
<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>
Exemple
Délégation d'événement : 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>