获取在 Tab 键后具有焦点的“上一个”元素

Question

我正在研究键盘管理并坚持这个问题，我需要在 Tab 之前找到具有焦点的元素。例如，假设我在 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;
}

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