Question

我正在尝试在页面顶部创建可导航列表。所以我<ul>里面有一些<li>。我不需要显示完整列表，我可能会有很多。我需要有机会使用键盘在此列表中导航。我添加了li的tabindex='0'属性。问题是，在底部元素被聚焦之后，窗口开始用列表滚动。

HTML：

<ul>
    <li tabIndex="0">item 1</li>
    <li tabIndex="0">item 2</li>
    <li tabIndex="0">item 3</li>
    <li tabIndex="0">item 4</li>
    <li tabIndex="0">item 5</li>
    <li tabIndex="0">item 6</li>
    <li tabIndex="0">item 7</li>
    <li tabIndex="0">item 8</li>
    <li tabIndex="0">item 9</li>
    <li tabIndex="0">item 10</li>
    <li tabIndex="0">item 11</li>
    <li tabIndex="0">item 12</li>
    <li tabIndex="0">item 13</li>
    <li tabIndex="0">item 14</li>
    <li tabIndex="0">item 15</li>
    <li tabIndex="0">item 16</li>
</ul>

JS：

$('li').on('focus', function() {
    $(this).addClass('focused');
});

$('li').on('focusout', function() {
    $(this).removeClass('focused');
});

$('li').keydown(function (e) {
    if (e.keyCode == 38) {
        $(e.target).prev().focus();
    }
    if (e.keyCode == 40) {
        $(e.target).next().focus();
    }
});

小提琴：https://jsfiddle.net/xne2p3mo/1/

Answer 1

将e.preventDefault();置于keydown回调中，或者也可以检查何时应该阻止默认值，例如滚动窗口。

$('li').keydown(function (e) {
    if (e.keyCode == 38 || e.keyCode == 40) {
        e.preventDefault();
    }
    e.preventDefault();
    if (e.keyCode == 38) {
        $(e.target).prev().focus();
    }
    if (e.keyCode == 40) {
        $(e.target).next().focus();
    }
});

窗口滚动列表

1 个答案: