3

これが私が持っているフォームの例です。

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

}

タブ オーダーは、最後までタブを使用すると正常に機能しますが、ラジオ ボタンに到達した場合は、マウスを使用してオプションを選択し、タブを押すと、タブインデックス 1 に戻ります。jquery を使用してタブインデックスを設定する必要があります。私は MVC3 を使用しており、EditorFor を使用する必要があるためです。

これを修正する方法はありますか、それとも正常ですか？

これは IE ではなく Chrome で発生することに注意してください。

編集：既存のバグだと思います https://code.google.com/p/chromium/issues/detail?id=181144

4

2 に答える 2

2

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

}
于 2013-07-26T14:40:06.070 に答える
0

入力に ​​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 />
于 2013-07-26T14:12:29.790 に答える