忽略自动生成的tabindex's

Ignore automatically generated tabindex's

本文关键字：tabindex 自动生成      更新时间：2023-09-26

我有一个表单，它使用tabindex在逻辑上遍历表单中的输入字段。但是，在我的表单中有一个jQWidgets网格，它也将tabindex应用于其元素。由于我的输入字段嵌套在div中，表索引顺序被打乱了，所以不是以正确的顺序遍历，当使用Tab按钮时，焦点在页面上跳跃。

谁能看到一种方法，无论是使用HTML或Javascript (jQuery)，以防止这种情况发生?

我已经尝试嵌套网格进一步向下DOM，但这没有影响…

HTML的结构必须对所有input字段保持相同

你可以在这里看到: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 's，但我看不到这样做的方法…

因为您不知道jqWidget tabindex设置了什么，所以我使用以下策略:
1-我给我的表索引顺序的每一个输入，我介绍，
我给他们一个"tabindex"类，
3-每次jqWidget初始化后，我会删除所有不是我引入的表索引

<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与data-bind "attr: {class 'tabindex'， tabindex: $index}"

已知的缺陷:
如果你有导航栏，选项卡会从它跳到地址栏。


我的两分钱

N

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

在研究了这个之后，很明显，唯一的解决方案是在网格内的任何元素上去掉tabindex 's。因此，我实现了以下代码来选择网格中具有tabindex设置的任何元素(当它被启动时)，然后将其删除。

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

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

相关文章：