Evénement onfocus
Exemple
Exécutez un JavaScript lorsqu'un champ de saisie obtient le focus :
<input type="text"
onfocus="myFunction()">
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
L'événement onfocus se produit lorsqu'un élément obtient le focus.
L'événement onfocus est le plus souvent utilisé avec <input>, <select> et <a>.
Astuce : L'événement onfocus est l'opposé de l' événement onblur .
Conseil : L'événement onfocus est similaire à l' événement onfocusin . 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 pouvez utiliser l'événement onfocusin. Cependant, vous pouvez y parvenir en utilisant le paramètre facultatif useCapture de la méthode addEventListener() pour l'événement onfocus.
Prise en charge du navigateur
Event | |||||
---|---|---|---|---|---|
onfocus | Yes | Yes | Yes | Yes | Yes |
Syntaxe
En HTML :
<element onfocus="myScript">
En Javascript :
object.onfocus = function(){myScript};
En JavaScript, en utilisant la méthode addEventListener() :
object.addEventListener("focus", 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: | Non |
---|---|
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 "onfocus" avec l'événement "onblur":
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Exemple
Effacer le champ de saisie sur le focus :
<!-- When the input field gets focus, replace its current value with an
empty string -->
<input type="text" onfocus="this.value=''" value="Blabla">
Exemple
Délégation d'événement : définition du 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>
Exemple
Délégation d'événement : utilisation de 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>