Question

我有一个表单，使用tabindex逻辑遍历表单中的输入字段。但是，在我的表单中，有一个jQWidgets网格也会将tabindex应用于其元素。由于我的输入字段嵌套在div中，因此tabindex顺序混乱，因此在使用 Tab 按钮时，焦点会跳转到页面，而不是以正确的顺序遍历

任何人都可以看到使用HTML或Javascript（jQuery）来防止这种情况发生吗？

我已经尝试将网格嵌入DOM中，但这没有任何影响......

所有input字段的HTML结构必须保持不变

您可以在此处看到：http://jsfiddle.net/TN7xL/1/

或者，这是我的代码示例（我已经删除了所有不相关的id和类）：

<form>
    <div class="row">
        <div class="column">
            <div>
                <label for="foo">Foo</label>
                <div>
                    <input type="text" id="foo" name="foo" tabindex="1" />
                </div>
            </div>
            <div>
                <label for="bar">Bar</label>
                <div>
                    <input type="text" id="bar" name="bar" tabindex="2" />
                </div>
            </div>
        </div>
        <div class="column">
            <div>
                <label for="name">Name</label>
                <div>
                    <input type="text" id="name" name="name" tabindex="3" />
                </div>
            </div>
            <div>
                <label for="surname">Surname</label>
                <div>
                    <input type="text" id="surname" name="surname" tabindex="4" />
                </div>
            </div>
        </div>
    </div>
    <!-- THERE ARE MORE ROWS AND COLUMNS IN MY FULL SCRIPT -->
    <div id="grid" class="row">
        <!-- THE FOLLOWING IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
        <div tabindex="0">
            <div tabindex="1">GRID HERE</div>
        </div>
        <!-- THE ABOVE IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
    </div>
    <div class="row">
        <div class="column">
            <div>
                <label for="field">Another Field</label>
                <div>
                    <input type="text" id="field" name="field" tabindex="5" />
                </div>
            </div>
        </div>
    </div>
</form>

我的目标是有效地忽略jQWidgets网格设置的tabindex，但我看不到这样做的方法......

Answer 1

仅仅因为您不知道jqWidget tabindex的设置，我使用这个策略：
1-我将我的tabindex命令发给我介绍的每一个输入，
2-我给他们一个“tabindex”类，
3-我删除每个jqWidget初始化后不是我所介绍的每个tabindex。

<html>
    <input type="text" class="tabindex" tabindex="2" />
    <div id="split"> ... </div>

<script>
    $("#split").jqxSplitter(settings);

    // Delete every tabindex introduced by jqWidgets
    $("[tabindex]:not(.tabindex)").removeProp("tabindex").removeAttr("tabindex");

这个解决方案适用于几乎所有jqWidget组件在网格或每个循环情况下，你可以使用knockout with data-bind“attr：{class'tabindex'，tabindex：$ index}”

已知错误：
如果您有导航栏，则选项卡会从其跳转到地址栏

我2美分

Ñ

Answer 2

您可以使用jQuery的removeAttr方法删除自动生成的tabindex。 http://api.jquery.com/removeAttr/

Answer 3

在研究之后，很明显唯一的解决方案是删除网格中任何元素的tabindex。因此，我实现了以下代码来选择具有tabindex集的网格中的任何元素（当它被启动时），然后我将其删除。

ready: function(){
    // Remove any tabindex's set by the grid
    $('#grid [tabindex]').removeAttr('tabindex');
}

Answer 4

$(document).ready(function(){ $('input').removeAttr("tabindex"); });

忽略自动生成的tabindex

4 个答案: