Comment détecter la clé de l'onglet dans JavaScript

Nous rencontrons souvent des sites Web ou des pages Web qui composent l'élément sensible au cas. De plus, certaines pages Web ne vous permettent pas de saisir les données tant que la touche spécifique, telle que Caps Lock, est enfoncée, en particulier dans le cas des mots de passe. Dans de tels cas, la détection de la clé de onglet dans JavaScript devient très utile pour alerter l'utilisateur des données entrées à l'avance.

Cet article vous guidera pour détecter la clé de l'onglet dans JavaScript.

Comment détecter la clé de l'onglet dans JavaScript?

Pour détecter la touche Tab dans JavaScript, appliquez les techniques suivantes:

• "QuerySelector ()" Méthode
• "getElementByid ()" Méthode

Les approches mentionnées seront démontrées une par une!

Méthode 1: Détectez la clé de l'onglet dans JavaScript à l'aide du document.Méthode QueySelector ()

Le "document.QuerySelector ()»La méthode accède au premier élément correspondant à un sélecteur CSS, puis la méthode AddEventListener () ajoute un gestionnaire d'événements à l'élément accessible. Ces méthodes peuvent être appliquées pour accéder au type d'entrée et détecter si la touche de tabulation est enfoncée ou non lorsque sa valeur est entrée.

Syntaxe

élément.AddeventListener (événement, fonction, usecapture)

Dans la syntaxe donnée, "événement"Fait référence au nom de l'événement,"fonction«Est la fonction spécifique à exécuter lorsque l'événement se produit, et«user"Est l'argument facultatif.

document.QueySelector (sélecteurs CSS)

Dans la syntaxe ci-dessus, "Sélecteurs CSS»Reportez-vous à un ou plusieurs sélecteurs CSS qui peuvent être spécifiés dans le document.Méthode QueySelector ().

Passer par l'exemple suivant pour une meilleure compréhension du concept déclaré.

Exemple
Tout d'abord, spécifiez le type d'entrée comme «texte«Avec une valeur d'espace réservée initiale et une rubrique dans le«" étiqueter:

Résultat

Ensuite, appliquez le «document.QuerySelector ()«Méthode pour accéder à l'entrée spécifiée et à l'en-tête respectivement et à les stocker dans les variables nommées«saisir" et "résultat»:

Soit l'entrée = document.queySelector ("entrée");
Let résultat = documenter.queySelector ("H2");

Maintenant, ajoutez le "touche Bas”Événement avec le champ de saisie à l'aide de la méthode AddeventListener (). Cet événement informera l'utilisateur chaque fois que le «languette»La touche est enfoncée dans le champ de saisie en appliquant la condition suivante à l'aide du«texte de texte" propriété:

saisir.addEventListener ("keydown", (e) =>
si (e.key === "tab")
résultat.InnerText = "Tab Key Appuyed";
autre
résultat.InnerText = "Tab Key non appuyé";

Dans ce cas, lorsque l'utilisateur appuyera sur la touche TAB, l'ajout informera l'action effectuée:

Méthode 2: Détectez la clé de l'abat-t-elle en JavaScript à l'aide du document.Méthode GetElementById ()

Le "document.getElementByid ()«La méthode peut être utilisée pour accéder à un élément HTML particulier en fonction de son identifiant. Cette méthode peut être implémentée pour obtenir le champ de saisie et ajouter un événement pour alerter l'utilisateur chaque fois que la touche particulière est appuyée, comme la touche Tab.

Syntaxe

document.GetElementByid (EleMedId)

Dans la syntaxe donnée, "élémentID»Fait référence à l'ID d'un élément spécifié.

Présentation de l'exemple suivant.

Exemple
Dans l'exemple ci-dessous, incluez un type d'entrée et une valeur d'espace réservé comme discuté dans la méthode précédente:

Maintenant, récupérez l'ID de champ de saisie en utilisant le «document.getElementByid ()" méthode.

Soit l'entrée = document.GetElementById («Tab»);

Enfin, ajoutez un événement nommé "touche Bas«Dans la méthode AddeventListener (), qui alertera l'utilisateur chaque fois que«Languette»La touche est enfoncée:

saisir.addEventListener ("keydown", (e) =>
si (e.key === "tab")
alert ("touche de tabulation appuyée");

);

Sortir

Nous avons discuté de toutes les méthodes les plus simples pour détecter la touche Tab en JavaScript.

Conclusion

Pour détecter la clé de l'onglet dans JavaScript, utilisez le «addEventListener ()" avec le "document.QuerySelector ()«Méthode pour obtenir le type d'entrée et appliquer un événement pour détecter la clé spécifiée ou le«getElementByid ()”Méthode pour récupérer le champ de saisie en fonction de son ID et en informer l'utilisateur chaque fois que la condition ajoutée est satisfaite. Ce blog a guidé sur la détection de la clé de l'onglet dans JavaScript.