获取"previous"在 Tab 键后具有焦点的元素

Question

我正在做键盘管理，在这个问题上卡住了，我需要找到在tab之前有焦点的元素。例如，我在html中有一个列表它看起来像

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

让我们假设现在有焦点的元素是Account按钮。之后我按tab键，焦点移到设置。现在，当我做document.activeElement时，我将获得设置按钮，但我如何获得之前有焦点的元素(在这种情况下，它将是帐户按钮)。目前我所做的是存储有焦点的元素，并在需要时使用它。这种方式的问题是前一个元素有时仍然保留对选项卡的关注，即使我通过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;
}

Answer 1

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

焦点事件使用setTimeout来确保变量在焦点事件发生之前被更新(在某些情况下，您可能会在模糊之前获得焦点)。正因为如此，timeout函数将最后一个集中在闭包中。

它还记录了当前关注的元素，这可能并不重要。如果聚焦和模糊是一样的，那么你知道焦点现在在别处。

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);
    });
  });
};

Answer 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/