获取选项卡后具有焦点的“上一个”元素答案

【问题标题】：Get "previous" element which had focus after tabbing获取选项卡后具有焦点的“上一个”元素
【发布时间】：2015-07-21 00:43:43
【问题描述】：

我正在处理键盘管理并坚持这个问题，我需要在选项卡之前找到具有焦点的元素。例如，假设我在 html 中有一个列表，看起来像

1. Folder button
2. Account button 
3. Setting Button
4. More Button
5. SignOut Button

假设现在具有焦点的元素是帐户按钮。稍后我按 Tab 键，焦点移至“设置”。现在，当我执行document.activeElement 时，我将获得设置按钮，但如何获得具有焦点的前一个元素（在本例中为帐户按钮）。我所做的当前 hack 是存储具有焦点的元素并在以后需要时使用它。这种方式的问题是，即使我通过tabIndex =-1 手动移除了它的焦点，前一个元素有时仍将焦点保留在选项卡上。请要求任何澄清。提前致谢

这就是我现在通过存储旧值所做的事情，但我想要一种更好的方式来做这件事。可能在不存储的情况下即时进行（即焦点更改时）

if(on arrow key events){
oldElementFocus = document.activeElement; //store previous element
do stuff...
}
if(event.keyCode && event.keyCode == 9){
// on tab I want to edit the attributes of the previous element
oldFocusedElement.tabIndex = -1;
}

【问题讨论】：

存储它是唯一的解决方案...您使用什么方法来确定标签？显示未按预期工作的代码
您考虑过添加模糊事件处理程序吗？演示复制问题会有所帮助
为什么要进行密钥嗅探？为什么不只使用模糊和焦点事件？

标签： javascript html focus onfocus

【解决方案1】：

您可以使用不使用击键捕获，而是使用模糊和焦点事件的方法。下面在每个元素上放置两个侦听器，一个用于当它被模糊时报告自己为模糊，另一个用于当它获得焦点时获取先前模糊的输入并对其进行处理（将其名称写入控制台）。

焦点事件使用 setTimeout 确保在焦点事件发生之前更新变量（在某些情况下，您可能会在模糊之前获得焦点）。因此，超时函数将最后一个焦点保持在闭包中。

它还记录当前的焦点元素，这可能并不重要。如果焦点和模糊是相同的，那么您知道焦点现在在别处。

window.onload = function() {
  var blurred, focused;
  var els = document.querySelectorAll('input');
  Array.prototype.forEach.call(els, function(el) {
    el.addEventListener('blur',function(){
      blurred = this;
    });
    el.addEventListener('focus',function(){
      focused = this;
      var last = blurred;
      setTimeout(function(){console.log('previous: ' + (last? last.name : 'none'))}, 0);
    });
  });
};

【讨论】：

【解决方案2】：

我会监听 keydown 并检查 tab 键。然后更新两个变量。一个存储lastFocused 键，另一个存储当前焦点。

(function(){
    var lastFocus,
        currentFocus = document.activeElement;

    function getLast(event) {
        if(event.keyCode && event.keyCode == 9) {
            lastFocus = currentFocus;
            currentFocus = document.activeElement;
            alert(currentFocus);
        }
    }

    document.addEventListener("keydown", getLast, false);
})();

这是一个演示这个https://jsfiddle.net/dgautsch/qdx7hc7d/的小提琴

【讨论】：