Javascript 使用jquery在输入字段之间切换

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

我有一个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.datepickerhide；这会让日期选择器关闭。。但是，别这样。。这是有史以来最糟糕的解决方案

---

我知道这是e.stopPropagation的错，但是。。我怎样才能让它工作？任何建议？？？

您可以使用domhere输入元素的tabindex属性

例如：

---

用一段代码编辑了问题您发布的代码有什么问题？它有错误吗？没有，一切都好。。它根本不起作用。。当在其中一个元素上按TAB键时，所有元素似乎一个接一个地聚焦。tabindex属性将不起作用。我已经试过了，但没用。。如果可以的话，我不能使用它，因为其他HTML元素tabbable在当前对话框之外。然后你可以使用自己的函数，根据选择器id设置选项卡的顺序，同学们。希望这会有帮助。只有当你们觉得这条评论有用时，你们才能投票删除我的负面声誉。如果你们读了我在问题帖子中写的代码，你们会发现我已经做了你们建议的事情。谢谢你的努力，再见。