小编典典

div的Tab索引

html

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


阅读 354

收藏
2020-05-10

共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');
        }
    });
});
2020-05-10