Exemple
Exécuter un script JavaScript lorsqu'un champ d'entrée est sur le point d'obtenir le foyer:
<input type="text"
onfocusin="myFunction()"> Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.
Définition et utilisation
L'événement onfocusin se produit lorsqu'un élément est sur le point de se concentrer.
Astuce: L'événement onfocusin est similaire à l' onfocus événement. La principale différence est que l'événement onfocus ne bouillonne pas. Par conséquent, si vous voulez savoir si un élément ou son enfant est la mise au point, vous devez utiliser l'événement onfocusin.
Conseil: Bien que Firefox ne prend pas en charge l'événement onfocusin, vous pouvez savoir si un enfant d'un élément obtient le focus ou non, à l'aide d' un écouteur de capture pour le onfocus événement ( en utilisant le paramètre optionnel useCapture du addEventListener() méthode).
Tip: L'événement est onfocusin à l'opposé de l' onfocusout événement.
Support du navigateur
| un événement | |||||
|---|---|---|---|---|---|
| onfocusin | Oui | Oui | Non supporté | Oui | Oui |
Note: L'événement onfocusin peut ne pas fonctionner comme prévu dans Chrome, Safari et Opera 15+ en utilisant la syntaxe HTML JavaScript DOM. Cependant, il devrait fonctionner comme un attribut HTML et en utilisant la addEventListener() méthode.
Syntaxe
En HTML:
< Essayez vous - même » JavaScript (may not work as expected in Chrome, Safari and Opera 15+) :
object .onfocusin=function(){ Essayez vous - même » En JavaScript, en utilisant la addEventListener() méthode:
object .addEventListener("focusin", myScript );
Essayez vous - même » Note: Le addEventListener() méthode est pas prise en charge dans Internet Explorer 8 et les versions antérieures.
Détails techniques
| Bulles: | Oui |
|---|---|
| cancelable: | Non |
| Type d'événement: | FocusEvent |
| Pris en charge les balises HTML: | Tous les éléments HTML, SAUF: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title> |
| DOM Version: | Niveau 2 Événements |
autres exemples
Exemple
En utilisant "onfocusin" ainsi que le "onfocusout" l' événement:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Essayez vous - même » Exemple
Délégation de l' événement: régler le paramètre useCapture de addEventListener() true (for focus and blur) au (for focus and 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>
Essayez vous - même » Exemple
délégation de l'événement: utiliser l'événement focusIn (non pris en charge 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 » <Object Event