div上的选项卡索引

Question

div上的选项卡索引

42

请看下面的表单 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时会切换背景图片以及单选按钮的选中状态。

我需要在“terms_radio” DIV上设置tabindex索引，但仅在div上设置tabindex =“2”属性不起作用。

当光标位于电子邮件输入字段时，是否可以在按下TAB键时将单选按钮标签上的虚线边框提高？

- Mithun Sreedharan

4个回答

16

是的！有一个与此相关的规范，它叫做 WAI-ARIA，用于辅助功能：https://www.w3.org/TR/wai-aria-practices/#kbd_general_between

- hdf54d56

4

我将一个div元素添加了tabindex属性，浏览器按照预期的顺序对其进行了Tab键切换。 - josephdpurcell

8

你可以将tabindex的值从2更改为0。

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

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

- Poshan Bastola

tabindex与div兼容。 - nikhil84

0

你可以为单选框元素添加tabindex="2"，并隐藏单选框元素（不要使用display:none，而是使用z-index，这样它仍然可以通过tab键聚焦）。当你在电子邮件输入框中按下tab键时，单选按钮获得焦点，你就可以使用它了。

input:focus+label {}

为标签添加样式

- StackExploded

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- antz29 · Accepted Answer

DIV 元素与 tabindex 在 HTML4 中不兼容。

（注意，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');
        }
    });
});