如何创建tabindex组？ [英] How to create tabindex groups?

问题描述

我正在尝试制作tabindex群组，其中按组中的标签在该群组中旋转，直到其他群组通过javascript或手动聚焦。

I'm trying to make tabindex groups where pressing tab in a group it allways rotates in that group until the other group is focused via javascript or manually.

strong>问题：是否可以在没有JavaScript的情况下执行此操作，如果不能，我该如何实现？

Question: Is it possible to do this without JavaScript, if not how can I achieve this?

这里是 jsFiddle

HTML代码：

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

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

编辑：我宁愿iframe是最后手段来解决这个问题，在我的应用程序的这个开发阶段很难实现iframe。

I would prefer iframe to be last resort to solve this, it would be very hard to implement iframe at this stage of development in my application.

这是很杂乱的代码，但这是我想出来的。添加 data-tabgroup 和 data-tabgroupindex 到输入元素

This is pretty messy code, but this is what I came up. Adding data-tabgroup and data-tabgroupindex to input elements will correctly tab them without going out of the group.

由于 steveax 在此评论中指出，此建议不适用于

As steveax pointed out in this comment this is not suggested for users without keyboards or in any regular HTML form situation where this isn't really necessary.

Example in jsFiddle
Used libraries:

• 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代码：

JavaScript code:

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();
    }
});

推荐答案

JQuery UI有 ：tababble 选择器可以帮助您。

JQuery UI has a the :tababble selector which could help you out here.

1. 选择群组的所有最后一个标签页可选元素。


2. 捕获标签页输入。


3. 手动选择第一个标签页可选择的同级。


4. （同样适用于第一个标签页可选元素上的Shift +标签。）

1. Select all the last tab selectable elements of a group.
2. Capture the tab input.
3. Manually select the first tab selectable sibling.
4. (Likewise for Shift + tab on first tab selectable element.)

JSFiddle

$(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();
        } 
    });
});

这篇关于如何创建tabindex组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！