keyboard - Using JavaScript, how can you tell if a user is tabbing backwards? - Stack Overflow

admin管理员组

文章数量:1356413

I've got an HTML link, and I want to take some action when the user tabs away from it - but only if the user is tabbing forwards through the document, as opposed to backwards.

Is there a reliable cross-browser way to detect which way the user is tabbing through the document, or indeed if they're tabbing through the document at all? I'm binding to the blur event, but that doesn't necessarily mean that the user is tabbing.

I've had a look at inspecting the value of document.activeElement, or the hasFocus attribute of the previous focusable element in the source, but:

1. those seem like relatively recent additions, and thus might not be widely supported, and
2. I'm not sure they'll be inspectable when the blur event fires, as even if the user is tabbing, I don't think the next element will be focused yet.

I've got an HTML link, and I want to take some action when the user tabs away from it - but only if the user is tabbing forwards through the document, as opposed to backwards.

Is there a reliable cross-browser way to detect which way the user is tabbing through the document, or indeed if they're tabbing through the document at all? I'm binding to the blur event, but that doesn't necessarily mean that the user is tabbing.

I've had a look at inspecting the value of document.activeElement, or the hasFocus attribute of the previous focusable element in the source, but:

1. those seem like relatively recent additions, and thus might not be widely supported, and
2. I'm not sure they'll be inspectable when the blur event fires, as even if the user is tabbing, I don't think the next element will be focused yet.

• javascript
• keyboard
• accessibility

Share Improve this question Follow edited May 26, 2011 at 11:11 Robert Koritnik 105k5656 gold badges286286 silver badges413413 bronze badges asked May 26, 2011 at 11:00 Paul D. WaitePaul D. Waite 99k5757 gold badges203203 silver badges271271 bronze badges 3

• It's very peculiar of you to ask such questions since your reputation is rather high and especially because you have Javascript, HTML and jQuery badges... I'm a bit baffled. :S – Robert Koritnik Commented May 26, 2011 at 11:24
• 2 What do you want to do in response to it? There's a general accessibility guideline that you should never 'change context' (eg. move focus elsewhere, navigate to a different page) in response to focus change - regardless of direction. The right thing to do here may depend on what you plan on doing in response to the focus change... – BrendanMcK Commented May 27, 2011 at 9:42
• 1 @BrendanMcK: sure — I’ve since decided to avoid such detailed fiddling with the user’s keyboard actions. I think the whole thing was ill-conceived. – Paul D. Waite Commented May 31, 2011 at 9:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You will have to handle keydown event on the link itself.

$("your link selector").keydown(function(evt){
    if (evt.which === 9)
    {
        if(evt.shiftKey === true)
        {
            // user is tabbing backward
        }
        else
        {
            // User is tabbing forward
        }
    }
});

Check this JSFiddle example that detects forward and backward tabbing on a particular link.

Sidenote: You didn't specify jQuery tag on your question al though I provided jQuery code in my answer. Since you hold Javascript as well as jQuery badges I suppose it's going to be trivial for you to convert my code to pure Javascript.

As an alternative to a good solution from Robert, maybe you can leverage tabindex attribute? Set it for your html links and other “tabbable” items. Then check it in javascript.

Solution with tabindex: jsfiddle

Side effect: Elements will also react on mouse clicks. They will behave correctly. So this might be a good side effect or bad side effect depending on your needs.

本文标签： keyboardUsing JavaScripthow can you tell if a user is tabbing backwardsStack Overflow