请参见下面的表单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>
在这里,我以某种方式设置了协议复选框的样式,以使无线电输入完全隐藏并且将背景图像应用于包装器div,包装器div的onclick将切换背景图像以及无线电输入的检查状态。
我需要在’terms_radio’DIV上设置tabindex索引,只是div上的tabindex =“ 2”属性不起作用,
当光标位于电子邮件输入字段时,是否可以通过按TAB键使收音机输入标签上的虚线边框向上?
DIV元素与HTML4中的tabindex不兼容。
( 注: HTML 5规范 也 允许这样做,但是,它通常工作不管)
以下元素支持tabindex属性:A,AREA,BUTTON,INPUT,OBJECT,SELECT和TEXTAREA。
本质上讲,您希望能够保持专注的任何事物;表单元素,链接等
我想您可能想在这里做的是使用一些JS(我建议使用jQuery来实现相对轻松的操作)绑定到输入元素上的focus事件并在父div上设置border。
将其粘贴在body标签的底部,即可从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'); } }); });