选项卡上的索引
请参阅下面的表单HTML代码
<form method="post" action="register"> <div class="email"> Email <input type="text" tabindex="1" id="email" value="" name="email"> </div> </div> <div class="agreement"> <div tabindex="2" class="terms_radio"> <div onclick="changeTerm(this);" class="radio" id="terms_radio_wrapper" style="background-position: left 0pt;"> <input type="radio" id="terms" value="1" name="terms"><label for="terms">I have read and understood the</label> </div> </div> </div> <div class="form_submit"> <input type="button" tabindex="3" value="Cancel" name="cancel"> <input type="submit" tabindex="4" value="Submit" name="submit"> </div> </form> 在这里，我设置了协议checkbox，使得无线电input完全隐藏，背景图像应用于包装div，包装div的onclick将切换背景图像以及收音机input的检查状态。
我需要在“terms_radio”DIV上设置tabindex索引，只是在div上的tabindex =“2”属性不起作用，
当光标在电子邮件input字段时，是否可以在按TAB键时将无线电input的标签上的虚线边框起来？
DIV元素与HTML4中的 tabindex不兼容）。
（ 注意， HTML 5规范确实允许这样做，然而，它通常工作不pipe）
以下元素支持tabindex属性：A，AREA，BUTTON，INPUT，OBJECT，SELECT和TEXTAREA。
基本上任何你期望能够关注的东西; 表单元素，链接等
我想你可能想在这里做的是使用一些JS（我会build议jQuery的东西相对无痛）绑定到input元素上的焦点事件，并设置父div的边界。
把它贴在身体标签的底部，从Google CDN抓取jQuery：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
那么像这样的事情可能会做的伎俩：
$(function() { $('div.radio input').bind({ focus : function() { $(this).closest('div.radio').css('border','1px dotted #000'); }, blur : function() { $(this).closest('div.radio').css('border','none'); } }); });
是! 有一个规范，它被称为WAI-ARIA和它的可访问性： https ： //www.w3.org/TR/wai-aria-practices/#kbd_general_between
您可以简单地将tabindex值从2更改为0。
<div tabindex="0" class="terms_radio">
这提供了与您的代码stream程一起的默认焦点状态。
你可以把tabindex =“2”作为radio元素，隐藏radio元素（不能用display：none，而用z-index，这样它就保持为tabbable）。 当你按标签在电子邮件input字段，电台获得焦点，你可以使用
input:focus+label {}
风格的标签
的jsfiddle
$(document).ready(function() { lastIndex = 0; $(document).keydown(function(e) { if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex"); if (e.keyCode == 9) { if (e.shiftKey) { //Focus previous input if (thisTab == startIndex) { $("#" + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus(); return false; } } else { if (thisTab == lastIndex) { $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus(); return false; } } } }); var setTabindexLimit = function(x, fancyID) { console.log(x); startIndex = 1; lastIndex = x; tabLimitInID = fancyID; $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus(); } /*Taking last tabindex=10 */ setTabindexLimit(10, "Selector_With_Where_Tab_Index_You_Want"); });
setTabindexLimit（）函数两个属性10 ，它是Div中的最后一个Tabindex， Selector_With_Where_Tab_Index_You_Want是要在其中重复tabindex的div的类或ID。
