获取 Tab 后获得焦点的 "previous" 个元素

Question

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

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

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

这就是我现在通过存储旧值所做的事情，但我想要一种更好的方法。可能是在飞行中（即当焦点改变时）而不存储它

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

我会监听 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);
})();

这里有一个 fiddle 演示了这个 https://jsfiddle.net/dgautsch/qdx7hc7d/

Answer 2

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

焦点事件使用 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);
    });
  });
};

获取 Tab 后获得焦点的 "previous" 个元素

Get "previous" element which had focus after tabbing

html

javascript

focus

onfocus