Question

如何最好地使用jQuery将标签限制为容器（如表单）。当达到容器的最后一个输入控件时，我想点击标签循环回到容器中的第一个输入控件。

逃避这个“标签组”的唯一方法是点击它之外。

我希望这样做的原因是因为我在DOM中有多个表单，但有些表格在屏幕外（右侧）。他们只在需要时滑入以查看。

问题出现在FF中，当某人超出可见表单并进入屏幕外时，屏幕外表格会弹出视图，这是非常不受欢迎的。

我很感激任何帮助。感谢。

Answer 1

我能够基本上获得使用jQueryUI所需的东西。这是我的第一稿：

(function ($)
{
    $.widget("ui.tabLock",
    {
        options:
        {
            selector: ":tabbable" //jQuery selector for finding tabbable controls
        },

        _create: function ()
        {
            //Store 1st & last tabbable control
            var c = $(this.options.selector, this.element);
            this.firstCtrl = c.eq(0);
            this.lastCtrl = c.last();

            this._wireEvents();
        },

        destroy: function ()
        {
            $.Widget.prototype.destroy.call(this);   //jqueryUI 1.8
        },

        _wireEvents: function ()
        {
            var self = this;

            //Cycle on last input
            this.lastCtrl.on("keydown." + this.widgetName, function (e)
            {
                if (e.which === 9 && !e.shiftKey)
                {
                    self.firstCtrl.focus();
                    return false;
                }
            });

            //Cycle on first input
            this.firstCtrl.on("keydown." + this.widgetName, function (e)
            {
                if (e.which === 9 && e.shiftKey)
                {
                    self.lastCtrl.focus();
                    return false;
                }
            });
        }
    });

} (jQuery));

Answer 2

哇，又一个标签问题。我有类似的问题，并创建了一个小的jQueryUI插件，限制TAB影响的字段。你只是简单地使用它：

$(".someGroup").tabGuard();

这将使选项卡迭代.someGroup包装器内的字段。这样，您可以在页面上对各种表单进行分组，并且如果有意义的话，焦点对齐的将继续在TAB或Shift + TAB上进行迭代。在这里找到它：

http://tomaszegiert.seowebsolutions.com.au/tabguard/index.htm

我希望有人会发现它很有用。

使用jQuery包含表单的tabbing

2 个答案: