Question

我正在尝试使用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元素。 / p>

Example jsfiddle

Answer 1

您可以使用输入元素的.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

Answer 2

这对你有用吗？

$(document).ready(function () {
    $("input").on("keyup", function (event) {
        if (event.keyCode == 40) {
            $nextTabbable = $(this).next(":tabbable").length
                ? $(this).next(":tabbable")
                : $(this).parent().next().find(":tabbable").first()
            ;
            $nextTabbable.focus();
        }
        else if (event.keyCode == 38) {
            $prevTabbable = $(this).prev(":tabbable").length
                ? $(this).prev(":tabbable")
                : $(this).parent().prev().find(":tabbable").last()
            ;
            $prevTabbable.focus();
        }
    });
});

这是jsfiddle

jQuery UI使用：tabbable查找下一个和上一个tabbable元素

2 个答案: