javascript - html4 中的自定义键盘 Tab 键顺序

Question

我想管理键盘选项卡顺序功能，我正在使用页眉、页脚和侧边栏的模板，其中存在许多 anchor 元素和输入元素。在模板内容中，我们不能放置 tabindex 属性，该属性不在我的控制范围内。

模板的中间部分是我的工作区域，我在其中创建了一个表单和一些元素

<fieldset id="myWorkArea">
    <div class="fieldrow">
        <label for="input1">Class</label>
        <input  id="input1"/>
        <a id="help1" href="#">what's this?</a>
    </div>
    <div class="fieldrow">
        <label for="input2">Class</label>
        <input id="input2"/>
        <a id="help2" href="#">what's this?</a>
    </div>
</fieldset>

在上面的代码中，我想按照下面的 id 顺序进行光标 Tab 键切换。

#help1 > #input1
#help2 > #input2

是否有任何方法可以仅在 #myWorkArea 字段集元素中控制键盘 Tab 键顺序，因为我们无法为页面中的所有元素放置 tabindex ？

Answer 1

即使您无权访问模板，您仍然可以通过编程方式添加 tabindex 属性。

这里有一个片段:

var tabindex = 1;

$('#myWorkArea .fieldrow').each( function() {
	$('a', this).attr('tabindex', tabindex++);
	$('input', this).attr('tabindex', tabindex++);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="myWorkArea">
    <div class="fieldrow">
        <label for="input1">Class</label>
        <input  id="input1"/>
        <a id="help1" href="#">what's this?</a>
    </div>
    <div class="fieldrow">
        <label for="input2">Class</label>
        <input id="input2"/>
        <a id="help2" href="#">what's this?</a>
    </div>
</fieldset>

希望对你有帮助!