Question

我正在进行键盘管理并坚持这个问题，我需要找到在制表之前有焦点的元素。例如，假设我在html中有一个类似于

的列表

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

让我们说现在有焦点的元素是账户按钮。稍后我按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

我会听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/

的小提琴

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

获取标签后具有焦点的“上一个”元素

2 个答案: