0

I have a form that uses tabindex to logically traverse through the input fields in the form. However, within my form there is a jQWidgets grid that also applies tabindex to its elements. As my input fields are nested within div's, the tabindex order is being messed up so instead of traversing in the correct order, when using the Tab button, the focus jumps about the page.

Can anybody see of a way, either using HTML or Javascript (jQuery), to prevent this from occuring?

I have tried nesting the grid further down the DOM but this had no affect...

The structure of the HTML must remain the same for all of the input fields

You can see this here: http://jsfiddle.net/TN7xL/1/

Or alternatively, here is a sample of my code (I have stripped out all irrelevant id's and classes):

<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>

My aim is to effectively ignore the tabindex's that are set by the jQWidgets grid, but I cannot see a way to do this...

4

4 回答 4

2

仅仅因为你不知道 jqWidget tabindex 设置了什么，我使用了这个策略：
1-我给我引入的每个输入我的 tabindex 顺序，
2-我给他们一个“tabindex”类，
3-我删除每个 tabindex不是我在每次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 组件。
在网格或每个循环情况下，您可以使用带有 data-bind "attr: {class 'tabindex', tabindex: $index}" 的敲除

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


我的 2 美分

N

于 2014-03-17T15:08:58.833 回答
0

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

于 2013-06-04T11:24:24.183 回答
0

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

ready: function(){
    // Remove any tabindex's set by the grid
    $('#grid [tabindex]').removeAttr('tabindex');
}
于 2013-06-05T07:38:16.033 回答
-1

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

于 2013-07-17T20:07:56.590 回答