javascript - 使用 jquery 按 Tab 键浏览输入字段

Question

我正在处理一个很好的问题:

我有一个 jqueryUI 对话框，其中包含 3 到 8 个字段:在“TAB”按键上，我希望焦点按照我之前设置为 tabindex html 属性的顺序依次穿过这些字段。

我在网上读到，浏览器对 tabindex 属性的处理方式不同......并且我一直在自己的皮肤上尝试它。

所以..问题是:有没有办法在按下 TAB 键后实现这种循环行为？

注意:我无法使用第三方插件..

这是我正在处理的代码:

//... here i set the right values of tabindex to my input fields and then
$.each($array, function (index, elem) {

        var el = elem;

        $(el).on('focus', function (e) {
            $(window).keyup(function (e) {
                var code = (e.keyCode ? e.keyCode : e.which);
                if (code == 9) {
                    var nextIndex = $(el).attr('tabindex') + 1;

                    if (!($('.testPopup').find('input[tabindex=' + nextIndex + ']').length > 0)) {
                        nextIndex = 1;
                    }

                    //using timeout - leaves the event following its default behaviour and completing it
                    setTimeout(function () {
                        $('.testPopup').find('input[tabindex=' + nextIndex + ']').focus();
                    }, 1);
                }
            });
        });
    });

更新

我已经能够改进我之前的解决方案，代码如下:

$(el).on('focus', function (e) {
            $(el).off('keydown').on('keydown', function (e) {

                var code = (e.keyCode ? e.keyCode : e.which);
                if (code == 9) {

                    var nextIndex = $(el).attr('tabindex') + 1;

                    if (!($('.testPopup').find('input[tabindex=' + nextIndex + ']').length > 0)) {
                        nextIndex = 1;
                    }

                    //using timeout - leaves the event following its default behaviour and completing it
                    setTimeout(function () {
                        //Here is the trick which would make my solution working,
                        //but it wouldn't be a flexible reusable solution
                        //$(el).datepicker("hide");
                        $('.testPopup').find('input[tabindex=' + nextIndex + ']').focus();
                    }, 1);

                    //e.preventDefault();
                    e.stopPropagation();
                    return false;
                }
            });
        });

目前的问题如下:通过对话框进行 Tab 键操作将聚焦于右侧的下一个输入字段，但这些输入字段之一是 jQueryUI 日期选择器，它不会自行关闭。如果您查看我更新的代码，您会看到注释行 $(el).datepicker("hide"); 这将使日期选择器关闭..但是，来吧..有史以来最糟糕的解决方案..

我知道问题出在e.stopPropagation()上，但是..我怎样才能让它工作呢？有什么建议吗？？

Answer 1

您可以使用 dom(此处为输入元素)的 tabindex 属性。

例如: <input type="text" placeholder="User Name" id="username" name="username" value="This is a test" onkeydown="checkEvent(event);" tabindex='1' />