Il existe de nombreuses catégories d'événements JavaScript, mais dans cet article, nous soulignerons l'utilisation des événements JavaScript Focus et Blur.
Événements JavaScript Focus et flou
Lorsque les éléments HTML se concentrent ou perdent la focalisation, la mise au point JavaScript ou les événements de flou se produisent qui font partie de l'objet FocUsevent.
Les événements classés dans la catégorie des événements JavaScript Focus et Blur sont démontrés ci-dessous:
Chacun des événements mentionnés ci-dessus est discuté ci-dessous.
événement onblur
L'événement OnBlur se produit lorsque le foyer d'un objet est perdu. Il est principalement utilisé dans le code de validation d'un formulaire. Il ne bouillonne pas et ne peut pas être annulé. Il prend en charge toutes les balises HTML autres que , ,
, , ,
Syntaxe
La syntaxe de l'événement OnBlur est la suivante.
Syntaxe HTML
Syntaxe JavaScript
objet.onBlur = function () script;Syntaxe javascript addeventListener ()
objet.addEventListener ("blur", script);Exemple
La fonction modifiera les lettres minuscules en lettres supérieures.
Sortir
Lorsque vous quittez le champ de saisie, l'événement OnBlur se produit et les lettres de cas inférieur sont déplacées vers la lettre de cas supérieure.
événement OnFocus
L'événement OnFocus se produit lorsqu'un éléments est concentré. Il est principalement utilisé avec, et et . Il ne bouillonne pas et ne peut pas être annulé. Il prend en charge toutes les balises HTML autres que , ,
, , ,
Syntaxe
La syntaxe de l'événement OnFocus est la suivante.
Syntaxe HTML
Syntaxe JavaScript
objet.onfocus = function () script;Syntaxe javascript addeventListener ()
objet.addEventListener ("focus", script);Exemple
Une fonction modifie la couleur d'arrière-plan du champ de saisie lorsqu'il est concentré.
Sortir
Lorsque vous cliquez sur le champ de saisie, la couleur d'arrière-plan du champ de saisie sera changée en bleu. Nous avons montré l'état avant et après le champ de saisie ci-dessous.
Avant
Après
événement onfocusin
L'événement onnfocusin est le même comme l'événement OnFocus et se produit lorsqu'un élément obtient simplement la mise au point, mais une différence subtile entre ces deux. Il prend en charge toutes les balises HTML autres que , ,
, , ,
Syntaxe
La syntaxe de l'événement onfocusin est la suivante.
Syntaxe HTML
Syntaxe JavaScript
objet.onFoCusin = function () script;Syntaxe javascript addeventListener ()
objet.addEventListener ("focusin", script);Exemple
Cliquez sur le champ de saisie
Sortir
Avant de cliquer sur le champ de saisie.
Après avoir cliqué sur le champ de saisie, la couleur d'arrière-plan du champ de saisie sera changée en rose.
Événement OnFocusout
L'événement onnfocusout est le même comme l'événement OnBlur et se produit lorsqu'un élément perd simplement la focalisation, mais une différence subtile entre ces deux est que ces bulles (onfocusout) et ne peuvent pas être annulées. Il prend en charge toutes les balises HTML autres que , ,
, , ,
Syntaxe
La syntaxe de l'événement OnFocusout est la suivante.
Syntaxe HTML
Syntaxe JavaScript
objet.onfocusout = function () script;Syntaxe javascript addeventListener ()
objet.addEventListener ("focusout", script);Exemple
Laissez le champ de saisie pour déplacer les lettres de cas inférieur vers le haut de la case.
Sortir
Lorsque vous quittez le champ de saisie, les lettres en minuscules seront déplacées vers les lettres supérieures.
Conclusion
Les événements qui se produisent lorsqu'un élément gagne ou perd sa mise au point est appelé les événements JavaScript Focus et Blur. Les événements qui sont classés dans la catégorie des événements JavaScript Focus et Blur sont des événements onblur, un événement onfouc, un événement onfocusin et un événement OnFocusout. Tous ces événements sont discutés en détail avec un exemple approprié.