使用键盘导航处理两个 div。答案

【问题标题】：Handling two divs with keyboard navigation.使用键盘导航处理两个 div。
【发布时间】：2013-11-05 16:38:53
【问题描述】：

我没有足够的代表来为我正在尝试做的事情添加图像，但我会尽量做到明确。

我想创造这样的东西 -

div "1" selected from left nav, right nav shows A,B,C,D

|'''''''''''''''|''''''''''''''''''''''''''''''''''''''|
|               |                                    1 |
|  |'''''''|    |       |'''''|           |'''''|      |
|  |...1...|    |       |  A  |           |  C  |      |
|               |       |.....|           |.....|      |
|  |'''''''|    |                                      |
|  |...2...|    |                                      |
|               |       |'''''|           |'''''|      |
|  |'''''''|    |       |  B  |           |  D  |      |
|  |...3...|    |       |.....|           |.....|      | 
|               |                                      |
|...............|......................................|

div "2" selected from left nav, right nav shows E,F,G,H

    |'''''''''''''''|''''''''''''''''''''''''''''''''''''''|
    |               |                                    2 |
    |  |'''''''|    |       |'''''|           |'''''|      |
    |  |...1...|    |       |  E  |           |  G  |      |
    |               |       |.....|           |.....|      |
    |  |'''''''|    |                                      |
    |  |...2...|    |                                      |
    |               |       |'''''|           |'''''|      |
    |  |'''''''|    |       |  F  |           |  H  |      |
    |  |...3...|    |       |.....|           |.....|      | 
    |               |                                      |
    |...............|......................................|

我有 2 个 div，leftNavigation 和 rightNavigation。

leftNavigation 有 3 个 div 作为按钮。现在我想只使用箭头键浏览这个网站。（上/下/左/右）

我可以使用 -

来捕捉事件

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

现在我的问题是 -

在同时处理左右导航的情况下如何使用这些键盘事件？

例如。当 leftNav 处于焦点时，上/下键应该只从 leftNavigation 中选择 div。当 rightNav 处于焦点时，向上/向下键应该只从右侧导航中选择 div？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这就是你所追求的吗？

if($.contains( $('.leftNavigation'), $(':focus')) // left col has focus
else if($.contains( $('.rightNavigation'), $(':focus')) // right col has focus

假设您的列分别具有 .leftNavigation 和 .rightNavigation 类

【讨论】：

嗯...我当然可以使用它来使 div 成为焦点。问题是 - 当其中一个 div 成为焦点时，keydown 事件是否只停留在那个 div 上？感谢您的回复，我将立即尝试。
您可以坚持使用现有的 keydown 处理程序，并使用此代码来确定哪一列是焦点以及您想采取什么行动

【解决方案2】：

这个 SO 问题可能会对您有所帮助 - 向 DIV 添加选项卡索引允许应用焦点并接受键盘事件。 SO:How Can I Give Focus to a DIV and Attach Keyboard Events

【讨论】：