使用 JavaScript，您如何判断用户是否在向后切换？答案

【问题标题】：Using JavaScript, how can you tell if a user is tabbing backwards?使用 JavaScript，您如何判断用户是否在向后切换？
【发布时间】：2011-09-02 12:10:08
【问题描述】：

我有一个 HTML 链接，我想在用户跳开它时采取一些行动 - 但前提是用户在文档中向前跳动而不是向后跳动。

是否有可靠的跨浏览器方法来检测用户在文档中以哪种方式切换，或者他们是否在文档中切换？我绑定到了blur 事件，但这并不一定意味着用户正在切换。

我查看了document.activeElement 的值，或者源中前一个可聚焦元素的hasFocus 属性，但是：

这些似乎是相对较新的添加，因此可能不会得到广泛支持，并且
我不确定当blur 事件触发时它们是否可以被检查，因为即使用户正在点击，我认为下一个元素也不会被聚焦。

【问题讨论】：

你问这样的问题很奇怪，因为你的声望很高，特别是因为你有 Javascript、HTML 和 jQuery 徽章...我有点困惑。 :S
你想怎么做？有一个通用的可访问性指南，你不应该“改变上下文”（例如，将焦点移到其他地方，导航到不同的页面）以响应焦点变化 - 无论方向如何。在这里做正确的事情可能取决于你计划做什么来应对焦点的变化......
@BrendanMcK：当然——我已经决定避免对用户的键盘操作进行如此详细的摆弄。我认为整个事情都是错误的。

标签： javascript keyboard accessibility

【解决方案1】：

您必须处理链接本身的keydown 事件。

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

检查此JSFiddle example，它检测特定链接上的向前和向后跳格。

旁注：尽管我在回答中提供了 jQuery 代码，但您没有在问题上指定 jQuery 标记。由于您拥有 Javascript 和 jQuery 徽章，我想您将我的代码转换为纯 Javascript 将是微不足道的。

【讨论】：

@Robert：当然，我正在考虑这个问题，但我不确定检测到 shift 键是否有点脆弱。 a) 检测 shift 键是否可靠跨浏览器？ b) shift-tab 是否总是用户在文档中向后切换的方式？这两个问题的答案很可能是肯定的，但我想我应该问问看是否有人比我有更好的主意。
@Paul D. Waite：它不适用于触控设备。但在大多数情况下，罗伯特的解决方案非常好。
@Robert：很好的答案顺便说一句，我将通过几个浏览器运行您的示例并报告任何潜在的不兼容性。
@Paul：谢谢，是的。它将提供更多信息以供将来参考。
一定要检查一下 Opera：它有一个相当有趣的键盘模型：TAB 只在某些类型的输入字段（文本区域、按钮等）之间移动，而不是链接；要在链接之间导航，请使用 SHIFT+ 箭头键。这里没有前进或后退的概念，纯粹是方向性的。

【解决方案2】：

作为 Robert 的一个好的解决方案的替代方案，也许您可以利用 tabindex 属性？为您的 html 链接和其他“可选项卡”项目设置它。然后在javascript中检查它。

使用 tabindex 的解决方案：jsfiddle

副作用：元素也会对鼠标点击做出反应。他们会正确行事。因此，这可能是好的副作用，也可能是坏的副作用，具体取决于您的需求。

【讨论】：