1

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

我有一个 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;
                }
            });
        });

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

我知道这是错的e.stopPropagation()，但是..我怎样才能让它工作？有什么建议吗？？

4

1 回答 1

-1

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

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

于 2013-09-17T15:31:22.073 回答