div上的标签索引

Posted 2023-03-05

【中文标题】div上的标签索引

【英文标题】：Tab Index on div

【发布时间】：2011-03-04 19:19:03

【问题描述】：

请看下面的表单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 时将收音机输入标签上的虚线边框向上显示？

【参考方案1】：

您可以简单地将 tabindex 值从 2 更改为 0。

<div tabindex="0" class="terms_radio">

这提供了与代码流相关的默认焦点状态。

https://www.w3.org/WAI/PF/aria-practices/#focus_tabindex

【讨论】：

tabindex 与 div 兼容

【参考方案2】：

是的！它有一个规范，称为 WAI-ARIA 及其可访问性：https://www.w3.org/TR/wai-aria-practices/#kbd_general_between

【讨论】：

我将 tabindex 添加到一个 div 中，浏览器按预期的顺序将其添加到它。

【参考方案3】：

DIV 元素与 tabindex in HTML4) 不兼容。

（注意 HTML 5规范确实允许这样做，但是无论如何它通常都可以工作）

以下元素支持 tabindex 属性：A、AREA、BUTTON、INPUT、OBJECT、SELECT 和 TEXTAREA。

基本上任何你希望能够保持焦点的东西；表单元素、链接等

我认为您可能想要在这里做的是使用一点 JS（我会推荐 jQuery 相对轻松的东西）绑定到输入元素上的焦点事件并在父 div 上设置边框。

把这个贴在你的body标签底部，从谷歌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');
        
    );
);

【讨论】：

根据 HTML4 规范，正确，但根据 HTML5 规范（参见 dev.w3.org/html5/spec-author-view/… 和 dev.w3.org/html5/spec-author-view/index.html#attributes-1），在实践中，tabindex can be applied to other elements，

这个答案确实需要更新以反映 HTML5 或在此处将不同的答案标记为正确的答案。

tabindex=0 对我有用。但是，当它聚焦 div 时，我无法通过“Enter”键点击它。鼠标点击有效。有什么想法吗？

【参考方案4】：

您可以将 tabindex="2" 设置为单选元素并隐藏单选元素（不是使用 display:none，而是使用 z-index，以便它保持可选项卡状态）。当您在电子邮件输入字段上按 Tab 时，收音机会获得焦点，您可以使用

input:focus+label 

为标签设置样式