CODEWITHSUNDEEP
javascriptjqueryhtmldom
RAKESH HOLKAR
RAKESH HOLKAR

Reputation: 2197

Custom keyboard tab order in html4

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?

Upvotes: 1

Views: 166

Answers (2)

ssilas777
ssilas777

Reputation: 9764

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

Upvotes: 0

David
David

Reputation: 7285

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!

Upvotes: 1

Related Questions