Question

这是我的一个示例表单。

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

}

如果你一直选中标签顺序就可以正常工作，但如果你到了单选按钮，然后用鼠标选择一个选项，然后按Tab键它会返回到tabindex 1.我需要设置tabindex使用jquery，因为我使用的是MVC3，我需要使用EditorFor。

有没有办法纠正这个问题还是正常的？

注意这种情况发生在Chrome中，而不是IE。

编辑：我猜它是现有的错误https://code.google.com/p/chromium/issues/detail?id=181144

Answer 1

我通过放置$（this）.focus（）;在我的单选按钮上。

像这样：

$(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);   

}

Answer 2

只需将tabindex添加到输入中，索引就会跳到下一个字段，因为收音机是一个选择

编辑：我建议使用<label></label>，因此当用户点击是或否时，该选项会突出显示。

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

单选按钮上的Tab键顺序不正确

2 个答案: