10

我正在尝试创建 tabindex 组,其中在一个组中按 tab 它总是在该组中旋转,直到另一个组通过 javascript 或手动聚焦。

问题:是否可以在没有 JavaScript 的情况下做到这一点,如果不能,我该如何实现?

这是jsFiddle

HTML 代码

<fieldset>
    <input tabindex="1"/>
    <input tabindex="2"/>
</fieldset>

<fieldset>
    <input tabindex="1"/>
    <input tabindex="2"/>
</fieldset>

编辑:我希望 iframe 是解决这个问题的最后手段,在我的应用程序的这个开发阶段很难实现 iframe。


这就是我想出的

这是非常混乱的代码,但这就是我想出的。添加data-tabgroupdata-tabgroupindexinput元素将正确地标记它们而不会离开组。

正如steveax在此评论中指出的那样,不建议没有键盘的用户或在实际上没有必要的任何常规 HTML 表单情况下这样做。

jsFiddle
使用的库中的示例:

  • lodash.js
  • jQuery 1.8.3

HTML 代码:

<div>
    <input data-tabgroup="first" data-tabgroupindex="1" />
    <input data-tabgroup="first" data-tabgroupindex="2" />
    <input data-tabgroup="first" data-tabgroupindex="3" />
    <input data-tabgroup="first" data-tabgroupindex="4" />
</div>
<div>
    <input data-tabgroup="second" data-tabgroupindex="1" />
    <input data-tabgroup="second" data-tabgroupindex="3" />
    <input data-tabgroup="second" data-tabgroupindex="2" />
    <input data-tabgroup="second" data-tabgroupindex="4" />
</div>

JavaScript 代码:

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
$(document).on('keydown', '[data-tabgroup]', function (e) {
    // TODO
    // Get elements tabgroup [DONE]
    // Find element position by tabgroupindex
    // Check if pressed shift+tab or tab
    // Check if it's first or the last element
    // Check which is next element to focus
    // Focus appropriate element

    if (e.which === 9) {

        var indexNode = $(e.target);
        var nodeIndex = indexNode.data("tabgroupindex");
        var tabgroup = indexNode.data("tabgroup");
        var tabgroupNodes = $("[data-tabgroup='" + tabgroup + "']");
        var tabgroupIndexes = [];
        _.each(tabgroupNodes, function (item) {
            tabgroupIndexes.push(+$(item).data("tabgroupindex"));
        });
        tabgroupIndexes = _(tabgroupIndexes).compact()
            .sortBy(function (num) {
            return num;
        }).value();
        if (isNumber(nodeIndex)) {
            if (e.which === 9) if (e.shiftKey) {
                var nextElement = tabgroupIndexes[tabgroupIndexes.indexOf(nodeIndex) - 1];
                if (typeof(nextElement) === "undefined") {
                    $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[tabgroupIndexes.length - 1] + "']").focus();
                    console.log($("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[tabgroupIndexes.length - 1] + "']").get(0));
                } else {
                    $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + nextElement + "']").focus();
                }
            } else {

                var nextElement = tabgroupIndexes[tabgroupIndexes.indexOf(nodeIndex) + 1];

                if (typeof(nextElement) === "undefined") {
                    console.log("Im in ")
                    $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[0] + "']").focus();
                    console.log($("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[0] + "']").get(0))
                } else {
                    $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + nextElement + "']").focus();
                }
            }

        } else {
                $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[0] + "']").focus();

        }
        e.preventDefault();
    }
});
4

1 回答 1

6

JQuery UI 有一个:tababble可以帮助你的选择器。

  1. 选择组的所有最后一个选项卡可选元素。
  2. 捕获选项卡输入。
  3. 手动选择第一个选项卡可选择的兄弟。
  4. (对于第一个选项卡可选元素上的 Shift + tab 也是如此。)

JSFiddle

JavaScript

$(function(){
    // Listen for TAB on last child.
    $('fieldset :tabbable:last-child').on('keydown', function(e) {
        if (e.which == 9) {
            e.preventDefault();
            $(this).siblings(':tabbable').eq(0).focus();
        } 
    });

    // Listen for SHIFT + TAB on first child.
    $('fieldset :tabbable:first-child').on('keydown', function(e) {
        if (e.shiftKey && e.which == 9) {
            e.preventDefault();
            $(this).siblings(':tabbable').eq(-1).focus();
        } 
    });
});
于 2013-08-31T04:10:48.963 回答