使用 Tab 键激活时如何检测 link 元素和表单输入字段的焦点？

Question

我想检测用户何时通过按 Tab 键聚焦 link 或输入字段。有谁知道这样做的方法吗？我试过使用 onFocus 事件，但它似乎不起作用。

（我没有用jQuery，我也想检测focus在link上，所以类似的问题16144611和这个不一样。）

Answer 1

通过组合 keyUp 和 document.activeElement 我们可以查看元素当前是否获得焦点。

然后我们需要在 keyup 上寻找 Tab 键，您就有了一个合理的解决方案。

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>

请注意，如果您只想检查链接和输入，更有效的检查方法是：

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>

使用 Tab 键激活时如何检测 link 元素和表单输入字段的焦点？

How to detect focus on link elements and form input fields when activated with Tab key?

javascript

keyboard

focus

accessibility

onfocus