最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Get "previous" element which had focus after tabbing - Stack Overflow

programmeradmin2浏览0评论

I am working on keyboard management and stuck on this issue where I need to find the element which had focus before tabbing. For example lets say I have a list in html which looks like

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

Lets say the element which has focus now is Account button. Later I press tab and the focus moves to Settings. Now when I do document.activeElement I will get Setting button but how do I get the previous element which had focus (in this case it would be Account button). The current hack that I have done is storing the element which has focus and using it later when needed. The problem with this way is the previous element sometimes still retains the focus on tabbing even though I manually remove its focus by tabIndex =-1. Please ask for any clarification. Thanks in advance

This is what I am doing now by storing the old value but I want a better way of doing it. May be on the fly(ie when focus changes) without storing it

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

I am working on keyboard management and stuck on this issue where I need to find the element which had focus before tabbing. For example lets say I have a list in html which looks like

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

Lets say the element which has focus now is Account button. Later I press tab and the focus moves to Settings. Now when I do document.activeElement I will get Setting button but how do I get the previous element which had focus (in this case it would be Account button). The current hack that I have done is storing the element which has focus and using it later when needed. The problem with this way is the previous element sometimes still retains the focus on tabbing even though I manually remove its focus by tabIndex =-1. Please ask for any clarification. Thanks in advance

This is what I am doing now by storing the old value but I want a better way of doing it. May be on the fly(ie when focus changes) without storing it

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;
}
Share Improve this question edited Jul 21, 2015 at 0:53 rk8785 asked Jul 21, 2015 at 0:43 rk8785rk8785 1891 gold badge1 silver badge9 bronze badges 3
  • 1 storing it would be only solution...what method are you using to determine the tabbing? SHow the code that isn't working as expected – charlietfl Commented Jul 21, 2015 at 0:47
  • have you considered adding a blur event handler ? A demo replicating problem would help – charlietfl Commented Jul 21, 2015 at 0:51
  • Why do key sniffing? Why not just use blur and focus events? – RobG Commented Jul 21, 2015 at 1:06
Add a ment  | 

2 Answers 2

Reset to default 2

You can use an approach that doesn't use keystroke capture, but instead uses blur and focus events. The following puts two listeners on each element, one for when it's blurred so that it reports itself as blurred, and one for when it's focused that gets the previously blurred input and does something with it (writes its name to the console).

The focus event use setTimeout to ensure that the variables are updated before the focus event occurs (you might get focus before blur in some cases). Because of that, the timeout function keeps the last focused in a closure.

It also records the current focused element, that may not be important. If focused and blurred are the same, then you know focus is now elsewhere.

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

I would listen for the keydown and check for the tab key. then update two variables. One that stores the lastFocused key and another that stores the current focus.

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

here is a fiddle that demonstrates this https://jsfiddle/dgautsch/qdx7hc7d/

发布评论

评论列表(0)

  1. 暂无评论