div 上的选项卡索引

发布于 2024-09-05 20:18:08 字数 1144 浏览 7 评论 0原文

请参阅下面的表单 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 时将无线电输入标签上的虚线边框带上是在电子邮件输入字段吗？

原文

Please see the form HTML code below

<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>

Here I styled the agreement check box in such a way that radio input is completely hidden and background image is applied to the wrapper div, and onclick of the wrapper div will toggle the background image as well as the checked status of the radio input.

I need to set the tabindex index on the 'terms_radio' DIV, simply tabindex="2" attribute on div is not working,

Is it possible to bring the dotted border on the label for the radio input up on pressing the TAB when the cursor is at email input field?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

往昔成烟 2024-09-12 20:18:08

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

DIV elements are not compatible with tabindex in HTML4).

(NOTE HTML 5 spec does allow this, however, and it commonly works regardless)

The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.

Essentially anything you would expect to be able to hold focus; form elements, links, etc.

What I think you probably want to do here is use a bit of JS (I would recommend jQuery for something relatively painless) to bind to the focus event on the input element and set border on the parent div.

Stick this at the bottom of your body tag to grab jQuery from the Google CDN:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Then something like this would probably do the trick:

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

回复收藏 0 原文

远昼 2024-09-12 20:18:08

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

回复收藏 0 原文

埋情葬爱 2024-09-12 20:18:08

您只需将 tabindex 值从 2 更改为 0。

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

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

回复收藏 0 原文

够运 2024-09-12 20:18:08

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

input:focus+label {}

来设置标签样式

You can put tabindex="2" for radio element and hide the radio element (not with display:none, but with z-index, so that it stays tabbable). When you press tab being on email input field, radio gets focus, and you can use