Exemple
Exécuter un script JavaScript lorsqu'un champ d'entrée se concentrer:
<input type="text"
onfocus="myFunction()"> Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.
Définition et utilisation
L'événement onfocus se produit lorsqu'un élément se concentrer.
L'événement onfocus est le plus souvent utilisé avec <input>, <select> et <a> .
Tip: L'événement onfocus est à l'opposé du onblur événement.
Astuce: L'événement onfocus est similaire à l' onfocusin é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 pouvez utiliser l'événement onfocusin. Cependant, vous pouvez le faire en utilisant le paramètre optionnel useCapture du addEventListener() méthode pour l'événement onfocus.
Support du navigateur
| un événement | |||||
|---|---|---|---|---|---|
| onfocus | Oui | Oui | Oui | Oui | Oui |
Syntaxe
En HTML:
< Essayez vous - même » JavaScript:
object .onfocus=function(){ Essayez vous - même » En JavaScript, en utilisant la addEventListener() méthode:
object .addEventListener("focus", 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: | Non |
|---|---|
| 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 "onfocus" ainsi que le "onblur" l' événement:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Essayez vous - même » Exemple
Délégation de l' événement: régler le paramètre useCapture de addEventListener() 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
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