div的Tab索引

Question

请参见下面的表单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键使收音机输入标签上的虚线边框向上？

Answer 1

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