Comment détecter la touche de tabulation en JavaScript

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

Cet article vous guidera pour détecter la touche de tabulation en JavaScript.

Comment détecter la touche de tabulation en JavaScript ?

Pour détecter la touche de tabulation en 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étecter la touche de tabulation en JavaScript à l'aide de la méthode document.querySelector()

La ' document.querySelector() ” 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 accédé. 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 saisie.

Syntaxe

élément. addEventListener ( un événement , fonction , utiliserCapture )

Dans la syntaxe donnée, ' un é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 ' utiliserCapture ” est l'argument facultatif.

document. querySelector ( Sélecteurs CSS )

Dans la syntaxe ci-dessus, ' Sélecteurs CSS ” fait référence à un ou plusieurs sélecteurs CSS qui peuvent être spécifiés dans la méthode document.querySelector().

Passez en revue l'exemple suivant pour une meilleure compréhension du concept énoncé.

Exemple
Tout d'abord, spécifiez le type d'entrée comme ' texte ' avec une valeur d'espace réservé initiale et un titre dans le ' ' étiquette:

< saisir taper = 'texte' espace réservé = 'Entrez du texte' >
< h2 > Résultat < / h2 >

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

laisser entrer = document. querySelector ( 'saisir' ) ;
laisser le résultat = document. querySelector ( 'h2' ) ;

Maintenant, ajoutez le ' touche Bas ” avec le champ de saisie à l'aide de la méthode addEventListener(). Cet événement informera l'utilisateur chaque fois que le ' languette ” est enfoncée dans le champ de saisie en appliquant la condition suivante à l'aide de la touche “ Texteintérieur ' propriété:

saisir. addEventListener ( 'touche Bas' , ( et ) => {
si ( et. clé === 'Languette' ) {
résultat. Texteintérieur = 'Touche de tabulation enfoncée' ;
} autre {
résultat. Texteintérieur = 'Touche de tabulation non enfoncée' ;
}

Dans ce cas, lorsque l'utilisateur appuiera sur la touche de tabulation, l'ajouté informera de l'action effectuée :

Méthode 2 : Détecter la touche de tabulation en JavaScript à l'aide de la méthode document.getElementbyId()

La ' document.getElementById() ” 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 enfoncée, comme la touche de tabulation.

Syntaxe

document. getElementById ( éléments )

Dans la syntaxe donnée, ' éléments ” fait référence à l'identifiant d'un élément spécifié.

Passons en revue l'exemple suivant.

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

< saisir taper = 'texte' identifiant = 'languette' espace réservé = 'Entrez du texte' >

Maintenant, récupérez l'identifiant du champ de saisie en utilisant le ' document.getElementById() ' méthode.

let input= document.getElementById('tab');

Enfin, ajoutez un événement nommé ' touche Bas ' dans la méthode addEventListener(), qui alertera l'utilisateur chaque fois que le ' Languette ” est enfoncée :

saisir. addEventListener ( 'touche Bas' , ( et ) => {
si ( et. clé === 'Languette' ) {
alerte ( 'Touche de tabulation enfoncée' ) ;
}
} ) ;

Production

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

Conclusion

Pour détecter la touche de tabulation en 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 la “ getElementbyId() ” méthode pour récupérer le champ d'entrée en fonction de son identifiant et notifier l'utilisateur chaque fois que la condition ajoutée est satisfaite. Ce blog a expliqué comment détecter la touche de tabulation en JavaScript.

Comment détecter la touche de tabulation en JavaScript