html4中的自定义键盘标签顺序

Question

I want to manage keyboard tab order functionality, I am using a template for header, footer and sidebar where many anchor element & input element exists. In template content we can not put and tabindex attribute which is not in my control.

Middle part of template is my work area, where I created a form and some element

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

In above code I want to cursor tabbing in below id order.

#help1 > #input1
#help2 > #input2

Is any approach to control keyboard tabbing order in only #myWorkArea fieldset elements as we can not put tabindex for all element in page?

Answer 1

Even if you have no access to the template, you can still add the tabindex attribute programmatically.

Here you have a snippet:

 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> 

Hope it helps!

Answer 2

You can add the tab index programmatically using javascript as David mentioned in his answer.

Or If you want you can control the taborder functionality by binding your own event to only these elements like below code.

Working 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;
                }
            });
});