Javascript | Se concentrer

Dans JavaScript, la méthode focus () est utilisée pour définir Focus sur n'importe quel élément de la page Web HTML, ce qui signifie qu'il définit cet élément comme élément actif. Le point clé ici est qu'il ne se concentre que sur les éléments qui «peut«Soyez concentré sur. En termes simples, tous les éléments ne peuvent pas être axés sur.

Pour mieux comprendre le se concentrer() Méthode, regardez sa syntaxe ci-dessous:

élément.Focus (options);

Dans cette syntaxe:

• élément: c'est la référence d'un élément HTML à l'intérieur de JavaScript.
• options: ce n'est pas un paramètre requis.

Exemple 1: se concentrer sur un champ de texte en utilisant la méthode focus ()

Commencez par créer un nouveau document HTML, et dans ce document, créez un champ de saisie et un bouton avec les lignes suivantes:

Concentrez-vous sur le champ de texte

Dans les lignes ci-dessus:

• La balise d'entrée a été donnée l'identifiant comme «TF1"
• Le bouton a l'ID comme «btn1"Et un jeu d'attribut onClick égal à" ButtonClicked () "

L'exécution de ce document HTML affiche ce qui suit sur le navigateur:

Le champ de texte et le bouton sont tous deux affichés sur la page Web. Maintenant, pour ajouter les fonctionnalités sur le bouton, ajoutez les lignes suivantes dans le fichier JavaScript:

fonction boutonClicked ()
tf = document.getElementById ("tf1");
TF.se concentrer();

Dans les lignes JavaScript ci-dessus:

• Créez d'abord une fonction nommée comme ButtonClicked ()
• Dans cette fonction, obtenez la référence du champ de texte en utilisant son identifiant et en stockant cette référence dans le «TF»Variable
• Après cela, appelez simplement le se concentrer() Méthode avec le «TF»Variable à l'aide de l'opérateur DOT

À ce stade, la page Web produit le résultat suivant:

Il est observable dans la sortie, que la pression du put met le champ de texte comme actif ou «au point".

Exemple 2: se concentrer sur un élément avec des arguments «options»

Dans cet exemple, l'objectif principal est d'avoir un élément à une position de défilement. Après cela, le bouton doit non seulement se concentrer sur cet élément, mais également apporter cet élément à partir du document.

Commencez par créer un document HTML, et tout comme dans le premier exemple, créez un champ de texte et un bouton avec les lignes suivantes:

type = "texte"
id = "tf1"
class = "défile"
placeholder = "je suis un champ de texte"
/>

Concentrez-vous sur le champ de texte

Dans ces lignes, la seule différence est:

• L'entrée qui a maintenant une classe "tourbillonné», Qui sera utilisé pour placer cette balise d'entrée à une position de défilement dans le document

Après cela, ajoutez les lignes suivantes au fichier CSS ou dans le étiqueter:

corps
Hauteur: 7000px;

.défilement
Position: absolue;
En haut: 4000px;

Dans les lignes mentionnées ci-dessus:

• Le document a été une hauteur de 7000px afin que le document devienne défilable
• Après cela, nous définissons l'élément avec le tourbillonné classe à une position absolue de 4000px du haut

L'exécution de ce document HTML donne la page Web suivante sur le navigateur:

Depuis la sortie, il est clair que le champ de texte est maintenant placé à une position de 4000px du haut.

Après cela, nous allons ajouter les lignes suivantes de JavaScript:

fonction boutonClicked ()
tf = document.getElementById ("tf1");
TF.focus (empreentscroll: false);

Dans ces lignes:

• Une fonction ButtonClicked () est fait
• Dans cette fonction, une référence au champ de texte est faite en utilisant son ID et stockée à l'intérieur de la variable "TF".
• Après cela, appliquez le se concentrer() Méthode sur le champ texte et dans son argument passe empêche lecroll: false. Cela mettra l'élément à l'orientation et fait défiler le document pour apporter cet élément en vue.

Exécutez le document HTML et vous obtiendrez le résultat suivant en cliquant sur le bouton:

Il est observable à partir de la sortie qui en cliquant sur le bouton, le champ de texte est mis dans la vue du navigateur en faisant défiler le document. De plus, le champ de texte se concentre maintenant sur.

Conclusion

Cet article met en lumière le but et le fonctionnement du se concentrer() Méthode en javascript. Cette méthode est utilisée pour mettre au point un élément du document HTML, ou en mots beaucoup plus simples, il définit leur propriété active comme vraie. Pour appliquer cette méthode, utilisez-le simplement avec la référence de l'élément HTML avec un opérateur de points. Cette méthode de mise au point peut également prendre un argument facultatif qui a été démontré ci-dessus.