Question

我有一个对话框，其中的表格在手风琴的标签之间分开（请参阅this jsfiddle 作为示例）。现在，当用户处于名字字段并按Tab键移动到下一个字段时，它会将焦点移动到Okay按钮;我想要发生的是Tab 2打开并关注地址第1行。是否有一种优雅的方式来做到这一点，还是我必须编写自己的按键处理程序？

谢谢！

来自小提琴的HTML代码：

<div id=dialog title="My dialog">
    <form>
    <div id=accordion>
        <h3>Tab 1</h3>
        <div><table>
            <tr><td><label for=last-edit>Last Name:</label></td><td><input id=last-edit /></td></tr>
            <tr><td><label for=first-edit>First Name:</label></td><td><input id=first-edit /></td></tr>
        </table></div>      
        <h3>Tab 2</h3>
        <div><table>
            <tr><td><label for=add1-edit>Address 1:</label></td><td><input id=add1-edit /></td></tr>
            <tr><td><label for=add2-edit>Address 2:</label></td><td><input id=add2-edit /></td></tr>
        </table></div>      
    </div>
    </form>
</div>

来自小提琴的Javascript：

$("#dialog").dialog({
    width: 500,
    autoOpen : true,
    buttons: {
        "Ok" : function() {
            $(this).dialog("close");
        },
        "Cancel" : function() {
            $(this).dialog("close");
        }
    },
});
$('#accordion').accordion({
    heightStyle: "content"
});

Answer 1

这将允许您浏览面板上的input元素，直到它到达最后一个input元素。然后，它将打开下一个面板，并在第一个focus元素上打开input。它将继续在这样的循环中工作。

$("input").on("keydown", function (e) {
    var code = e.keyCode || e.which;
    if (code == '9') {
        var currentInput = $("input:focus");
        var lastInput = $(".ui-accordion-content-active input").last();
        if (currentInput[0] === lastInput[0]) {
            var accordion = $("#accordion").accordion();
            var current = accordion.accordion("option", "active");
            var maximum = accordion.find("h3").length;
            var next = current + 1 === maximum ? 0 : current + 1;
            accordion.accordion("option", "active", next);
            var active = $(".ui-accordion-content-active[aria-expanded=true] input")[0];
            setTimeout(function () {
                active.focus()
            }, 1);
        }
    }
});

JSFiddle。确定下一个面板的代码来自here。我没有用两个以上的面板进行测试，但它应该可以工作。

Answer 2

为了补充查理的答案，我做了以下事情。它避免选择隐藏的输入，它还允许您将Shift + Tab从活动的折叠面板移到上一个，并满足页面加载后添加的任何动态输入：

$("#accordion").on("keydown", "input", function (e) {
    var code = e.keyCode || e.which;
    var count;

    if (code == '9') {
        count = $('#accordion h3').size();
        if (count <= 1) return;

        var currentInput = $("input[type!='hidden']:focus");
        if (e.shiftKey) {
            var firstInput = $(".ui-accordion-content-active input[type!='hidden']").first();
            if (currentInput[0] === firstInput[0]) {
                var accordion = $("#accordion").accordion();
                var current = accordion.accordion("option", "active");
                var prev = current - 1 < 0 ? count : current - 1;
                accordion.accordion("option", "active", prev);
                active = $(".ui-accordion-content-active[aria-expanded=true] input[type!='hidden']").last();
                setTimeout(function () {
                    active.focus();
                }, 1);
            }
        } else {
            var lastInput = $(".ui-accordion-content-active input[type!='hidden']").last();
            if (currentInput[0] === lastInput[0]) {
                var accordion = $("#accordion").accordion();
                var current = accordion.accordion("option", "active");
                var maximum = accordion.find("h3").length;
                var next = current + 1 === maximum ? 0 : current + 1;
                accordion.accordion("option", "active", next);
                active = $(".ui-accordion-content-active[aria-expanded=true] input[type!='hidden']")[0];
                setTimeout(function() {
                    active.focus();
                }, 1);
            }
        }
    }                
});

Answer 3

是的，您必须使用自己的按键处理程序。这是updated fiddle给你的。

var $accordion = $('#accordion');
$accordion.accordion({
    heightStyle: "content"
});

$('#first-edit').keydown(function (e) {
    // TAB key is keyCode 9
    if (e.keyCode == 9) {
        openNextAccordionPanel($accordion);
    }
});


function openNextAccordionPanel($accordion) {
    var current = $accordion.accordion("option", "active"),
        maximum = $accordion.find("h3").length,
        next = current + 1 === maximum ? 0 : current + 1;
    // $accordion.accordion("activate",next); // pre jQuery UI 1.10
    $accordion.accordion("option", "active", next);
}

jQuery Accordion中的表单：如何获取tab键以打开下一个选项卡？

3 个答案: