Mit*_*ran 32 html label input radio-button tabindex
请参阅下面的表单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索引,只是tab上的tabindex ="2"属性不起作用,
当光标位于电子邮件输入字段时,是否可以在按TAB时将无线电输入标签上的虚线边框带上？
小智 30
DIV元素与HTML4中的 tabindex不兼容.
(注: HTML 5规范也允许这样做,但是,它通常工作不管)
以下元素支持tabindex属性:A,AREA,BUTTON,INPUT,OBJECT,SELECT和TEXTAREA.
基本上你期望能够成为焦点的东西; 表单元素,链接等
我认为你可能想要做的是使用一些JS(我会建议jQuery为相对无痛的东西)绑定到输入元素上的焦点事件并在父div上设置边框.
将其粘贴在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');
}
});
});
小智 16
是! 它有一个规范,称为WAI-ARIA及其可访问性:https://www.w3.org/TR/wai-aria-practices/#kbd_general_between
小智 5
您可以简单地将 tabindex 值从 2 更改为 0。
<div tabindex="0" class="terms_radio">
这提供了与代码流相伴的默认焦点状态。
https://www.w3.org/WAI/PF/aria-practices/#focus_tabindex