Question

我想管理键盘标签顺序功能，我正在使用页眉，页脚和侧边栏的模板，其中许多锚元素和＆amp;输入元素存在。在模板内容中，我们无法将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命令中使用光标选项卡。

#help1 > #input1
#help2 > #input2

是否有任何方法仅在#myWorkArea字段集元素中控制键盘标签顺序，因为我们无法为页面中的所有元素添加tabindex？

Answer 1

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

这里有一个片段：

＆＃13;

New -> Java Class -> Choose Singleton from dropdown menu

＆＃13;

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

＆＃13;

希望它有所帮助！

Answer 2

您可以使用javascript以编程方式添加选项卡索引，正如David在答案中提到的那样。

或者如果您希望可以通过将自己的事件绑定到下面的代码这些元素来控制Taborder功能。

工作FIDDLE

$(function(){
    var inputs = $('a#help1, a#help2,input#input1, input#input2');
            $(inputs).bind('keydown', function (e) {     
               var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
           //check keycode for tabbing     
           if (e.keyCode == 9) {
                    switch($(this).attr("id")){                     
                        case "help1":
                            next=$('#input1');
                            break;
                          case "help2":
                            next=$('#input2');
                            break;
                          case "input1":
                            next=$('#help2');
                            break;  
                          case "input2":
                            next=$('#help1');
                            break; 
                           }                    
                    next.focus();
                    e.preventDefault();
                    return false;
                }
            });
});

html4中的自定义键盘选项卡顺序

2 个答案: