Quiero detectar cuándo el usuario enfoca un enlace o campo de entrada presionando la tecla Tabulador. ¿Alguien sabe de una manera de hacer esto? He intentado usar el evento onFocus, pero parece que no funciona.
(No estoy usando jQuery, y también quiero detectar el enfoque en los enlaces, por lo que la pregunta similar 16144611 no es la misma que esta).
Al combinar keyUp y document.activeElement , podemos ver si un elemento está enfocado actualmente.
Luego, debemos buscar la tecla Tab en keyup y tiene un comienzo razonable en una solución.
const els = document.querySelectorAll('a, input'); window.addEventListener('keyup', function(e){ // check the key code const code = (e.keyCode ? e.keyCode : e.which); if(code == 9 && els.length){ checkFocus(); } }); function checkFocus(){ // loop all elements (within our selector at the start) and see if they match the document.activeElement for (const el of els) { if(document.activeElement == el){ console.log("focused tag:" + el.tagName); } } } <button>Click me for focus, I am not checked</button> <a href="#">Focused Link</a> <label for="input1">I am also reported</label> <input id="input1"> <button>Another button not announced</button>Tenga en cuenta que si solo desea verificar los enlaces y las entradas, solo una forma más eficiente de verificar sería:
const els = ['A', 'INPUT']; window.addEventListener('keyup', function(e){ // check the key code const code = (e.keyCode ? e.keyCode : e.which); if(code == 9 && els.length){ checkFocus(); } }); function checkFocus(){ // by checking the tagName we only have to do 2 loops no matter how many links or inputs there are on a page, which is far more efficient. The downside is it will check **every** link and input on the page. You would access the element with document.activeElelemnt instead if you need to know which item was focused. for (const el of els) { if(document.activeElement.tagName == el){ console.log("focused tag:" + document.activeElement.tagName); } } } <button>Click me for focus, I am not checked</button> <a href="#">Focused Link</a> <label for="input1">I am also reported</label> <input id="input1"> <button>Another button not announced</button>