Comment définir la focalisation d'un élément de formulaire HTML dans JavaScript

Comment définir la focalisation d'un élément de formulaire HTML dans JavaScript
Focus sur l'élément fait référence à la section de la page actuellement active. Dans le présent document, un élément HTML peut être axé sur un moment, qui pourrait être une fenêtre, une zone de texte ou un bouton. Dans les formulaires HTML, le champ de saisie doit être un élément actif, car de nombreux éléments ne permettent pas de se concentrer par défaut. Ainsi, pour vous concentrer sur les éléments, utilisez le htmlelement.Méthode focus ().

Ce billet de blog illustrera le processus de définition de l'accent sur un élément d'un formulaire HTML dans JavaScript.

Comment définir la focalisation d'un élément de formulaire HTML dans JavaScript?

Pour définir la mise au point sur un élément d'un formulaire HTML, la méthode JavaScript Focus () peut être utilisée. Pour ce faire, appelez cette méthode tout en la passant l'objet de l'élément qui doit être concentré.

Syntaxe
Suivez la méthode mentionnée ci-dessous pour vous concentrer sur un élément d'une forme HTML:

Htmlelement.se concentrer()

Essayons quelques exemples pour voir comment régler la concentration sur un élément lors du chargement de la page ou sur le plan de volant d'un élément.

Exemple 1: Définissez la mise au point d'un élément de formulaire HTML sur le chargement de la page
Dans l'exemple donné, nous définirons Focus sur le champ de texte d'entrée sur le chargement de la page. Alors, créez un formulaire avec un champ de texte d'entrée qui sera actif pendant que la page se charge:



Le formulaire HTML ressemblera à ceci:

Comme vous pouvez le voir, la sortie ci-dessus montre un champ de saisie qui n'est pas actif. Ainsi, pour vous concentrer sur cette zone de texte, utilisez le code JavaScript-donné ci-dessous:

fenêtre.onload = function ()
document.getElementByid ("texte").se concentrer();

Dans les lignes de code ci-dessus:

  • Définissez une fonction sur le «fenêtre.en charge" événement.
  • Appeler le "se concentrer()"Méthode en récupérant l'élément HTML"zone de texte«Utilisation de son identifiant attribué à l'aide du«getElementByid ()" méthode.

La sortie correspondante sera la suivante:

Le GIF ci-dessus indique que la zone de texte est active sur le chargement de la page.

Ensuite, voyons comment définir l'accent sur le champ de saisie tout en oscillant sur l'élément.

Exemple 2: Définissez la mise au point d'un élément de forme HTML sur le plan de l'élément de survol de l'élément
Pour définir l'accent sur la zone de texte tout en planant dessus, utilisez le "onduir»Écouteur d'événements:



Définissez une fonction nommée «elementFocus ()«Cela déclenchera pendant que l'événement Mouseover se produit:

fonction ElementFocus ()
document.getElementByid ("texte").se concentrer();

La sortie montre que la zone de texte sera active tandis que la souris s'offre dessus:

Nous avons fourni les informations essentielles liées à la concentration de l'élément HTML dans un formulaire HTML en utilisant JavaScript.

Conclusion

Pour définir l'accent sur un élément d'une forme HTML dans JavaScript, utilisez le «Htmlelement.se concentrer()" méthode. Il peut être réglé sur les éléments HTML tels que «zone de texte","bouton" et ainsi de suite. Vous pouvez définir l'accent sur l'élément lors du chargement de la page ou de tout autre événement. Ce blog a illustré le processus pour se concentrer sur un élément d'un formulaire HTML dans JavaScript.