4

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 が見つかりません。ページ上の前のタブ可能な要素を見つける方法がわかりません。

jsfiddle の例

4

2 に答える 2

0

これはあなたのために働くでしょうか：

$(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があります

于 2013-02-14T17:20:38.867 に答える