CODEWITHSUNDEEP
jqueryhtmltabindex
RJP
RJP

Reputation: 4116

tab order on radio button not correct

Here is an example form I have.

http://jsfiddle.net/r45WL/

<input autocomplete="off"  id="FirstName" name="FirstName" type="text" value="" /><br/>
<input autocomplete="off" id="LastName" name="FirstName" type="text" value="" /><br/>    
<p style="float:left"><input id="YN_true" name="YN" type="radio" value="true" />Yes</p>
<p style="float:left"><input id="YN_false" name="YN" type="radio" value="false" >No</p>
<br/><br/>
<input autocomplete="off" id="CellPhone" maxlength="12" name="CellPhone" type="text" value="" />


$(document).ready(function(){  
  $("#FirstName").attr("tabindex", 1);
    $("#LastName").attr("tabindex", 2);
    $("#YN_true").attr("tabindex", 3);
    $("#YN_false").attr("tabindex", 4);
    $("#CellPhone").attr("tabindex", 5);   

}

The tab order works fine if you tab all the way through, but if you get to the radio buttons, then use the mouse to select an option, it then press tab it will go back to tabindex 1. I need to set tabindex using jquery because I am using MVC3 and I need to use EditorFor.

Is there a way to correct this or is it normal?

NOTE this happens in Chrome, not IE.

Edit: I guess its an existing bug https://code.google.com/p/chromium/issues/detail?id=181144

Upvotes: 3

Views: 5400

Answers (2)

James
James

Reputation: 5642

I've fixed this by putting $(this).focus(); on my radio buttons.

Like this:

$(document).ready(function(){  
    $("[type=radio]").click(function () {
        $(this).focus();
    });
  $("#FirstName").attr("tabindex", 1);
    $("#LastName").attr("tabindex", 2);
    $("#YN_true").attr("tabindex", 3);
    $("#YN_false").attr("tabindex", 4);
    $("#CellPhone").attr("tabindex", 5);   

}

Upvotes: 2

Luis Liz
Luis Liz

Reputation: 1959

Just add tabindex to the input and the index skips to the next field because the radio is a choice

EDIT: I suggest using <label></label> so when the person clicks yes or no the option is highlighted.

    <input autocomplete="off" id="FirstName" name="FirstName" type="text" value="test" tabindex=1 />
<br/>
<input autocomplete="off" id="LastName" name="FirstName" type="text" value="test" tabindex=2 />
<br/>
<p style="float:left">
    <input id="YN_true" name="YN" type="radio" value="true" tabindex=3 />
    <label for="Yn_true">Yes</label>
</p>
<p style="float:left">
    <input id="YN_false" name="YN" type="radio" value="false" />
    <label for="YN_false">No</label>
</p>
<br/>
<br/>
<input autocomplete="off" id="CellPhone" maxlength="12" name="CellPhone" type="text" value="" tabindex=5 />

Upvotes: 0

Related Questions