Aquest escrit us guiarà per detectar la clau de pestanya a JavaScript.
Com detectar la clau de pestanya a JavaScript?
Per detectar la tecla de tabulació a JavaScript, apliqueu les tècniques següents:
- “ querySelector() ” Mètode
- “ getElementbyId() ” Mètode
Els enfocaments esmentats es mostraran un per un!
Mètode 1: detecta la clau de pestanya a JavaScript mitjançant el mètode document.querySelector().
El ' document.querySelector() ” accedeix al primer element que coincideix amb un selector CSS i, a continuació, el mètode addEventListener() afegeix un controlador d'esdeveniments a l'element accedit. Aquests mètodes es poden aplicar per accedir al tipus d'entrada i detectar si es prem o no la tecla de tabulació quan s'introdueix el seu valor.
Sintaxi
element. addEventListener ( esdeveniment , funció , utilitza Capture )
En la sintaxi donada, ' esdeveniment ' fa referència al nom de l'esdeveniment ' funció ' és la funció específica que s'executa quan es produeix l'esdeveniment i ' utilitza Capture ” és l'argument opcional.
document. querySelector ( Selectors CSS )En la sintaxi anterior, ' Selectors CSS ” fa referència a un o més selectors CSS que es poden especificar al mètode document.querySelector().
Seguiu l'exemple següent per entendre millor el concepte indicat.
Exemple
En primer lloc, especifiqueu el tipus d'entrada com a ' text ” amb un valor de marcador de posició inicial i un encapçalament al “
< h2 > Resultat < / h2 >
A continuació, apliqueu el ' document.querySelector() ” mètode per accedir a l'entrada especificada i l'encapçalament respectivament i emmagatzemar-los a les variables anomenades “ entrada ' i ' resultat ”:
deixar entrar = document. querySelector ( 'entrada' ) ;deixar resultat = document. querySelector ( 'h2' ) ;
Ara, afegiu el ' tecla premut ” esdeveniment amb el camp d'entrada utilitzant el mètode addEventListener(). Aquest esdeveniment notificarà a l'usuari sempre que ' pestanya es prem la tecla ' al camp d'entrada aplicant la següent condició amb l'ajuda de la tecla ' text interior ' propietat:
entrada. addEventListener ( 'keydown' , ( i ) => {si ( i. clau === 'pestanya' ) {
resultat. text interior = 'Tecla de tabulació pressionada' ;
} altra cosa {
resultat. text interior = 'No s'ha premut la tecla Tab' ;
}
En aquest cas, quan l'usuari premeu la tecla Tab, l'afegit notificarà l'acció realitzada:
Mètode 2: Detecta la clau de pestanya a JavaScript mitjançant el mètode document.getElementbyId().
El ' document.getElementById() ” es pot utilitzar per accedir a un element HTML concret basat en el seu identificador. Aquest mètode es pot implementar per obtenir el camp d'entrada i afegir un esdeveniment per alertar l'usuari sempre que es prem una tecla concreta, com ara la tecla de tabulació.
Sintaxi
document. getElementById ( elements )En la sintaxi donada, ' elements ” fa referència a l'identificador d'un element especificat.
Anem a veure l'exemple següent.
Exemple
A l'exemple següent, incloeu un tipus d'entrada i un valor de marcador de posició tal com s'ha comentat al mètode anterior:
Ara, obteniu l'identificador del camp d'entrada amb el ' document.getElementById() ” mètode.
let input= document.getElementById(“tab”);
Finalment, afegiu un esdeveniment anomenat ' tecla premut ” al mètode addEventListener(), que avisarà l'usuari sempre que el “ Tab Es prem la tecla ”:
entrada. addEventListener ( 'keydown' , ( i ) => {si ( i. clau === 'pestanya' ) {
alerta ( 'Tecla de tabulació pressionada' ) ;
}
} ) ;
Sortida
Hem parlat de tots els mètodes més senzills per detectar la tecla de tabulació a JavaScript.
Conclusió
Per detectar la clau de pestanya a JavaScript, utilitzeu el ' addEventListener() ' amb el ' document.querySelector() ” mètode per obtenir el tipus d'entrada i aplicar un esdeveniment per detectar la clau especificada o el “ getElementbyId() ” mètode per obtenir el camp d'entrada en funció del seu identificador i notificar a l'usuari sempre que es compleixi la condició afegida. Aquest bloc va guiar sobre la detecció de claus de pestanya en JavaScript.