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

Custom keyboard tab order in html4

本文关键字：选项 顺序 键盘 自定义 html4      更新时间：2023-09-26

我想管理键盘选项卡的顺序功能，我使用一个模板的页眉，页脚和侧边栏，其中许多锚元素&输入元素存在。在模板内容中，我们不能放置和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属性。

这里有一个片段:

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>

希望有帮助!

你可以像David在他的回答中提到的那样使用javascript以编程方式添加标签索引。

或者如果你愿意，你可以通过将自己的事件绑定到这些元素来控制选项卡功能，就像下面的代码一样。

小提琴 

$(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;
                }
            });
});
相关文章：