使用 :tabbable to find next and previous tabbable element 的 jQuery UI

我正在尝试使用 jQuery UI :tabbable 选择器来选择页面上的下一个和上一个输入元素。我有以下 html

<div id="section1">1.
    <input type="text" />2.
    <input type="text" />
</div>
<div id="section2">3.
    <input type="text" />4.
    <input type="text" />5.
    <input type="text" />
</div>

和以下javascript

$(document).ready(function () {
    $("input").on("keyup", function (event) {
        if (event.keyCode == 40) $(this).next(":tabbable").focus();
        else if (event.keyCode == 38) $(this).prev(":tabbable").focus();
    });
});

选择器似乎在 div 中工作正常。例如，如果我在输入 3 中并按下它将转到输入 4。但是，如果我按下选择器无法找到输入 2。我似乎无法弄清楚如何在页面上找到前一个 tabbable 元素。

Example jsfiddle

最佳答案

您可以使用输入元素的 .index() 作为在它们之间切换的一种方式。

$("input").on("keyup", function (event) {
    if (event.keyCode == 40) {
        $('input').eq(parseInt($('input').index($(this)), 10) + 1).focus();
    } else if (event.keyCode == 38) {
        $('input').eq(parseInt($('input').index($(this)), 10) - 1).focus();
    }
});

jsFiddle example

关于使用 :tabbable to find next and previous tabbable element 的 jQuery UI，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14875775/