div上的标签索引

2022-01-21 00:00:00 input label radio-button html tabindex

请看下面的表单HTML代码

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>

在这里，我设置了协议复选框的样式，即完全隐藏无线电输入并将背景图像应用于包装器 div，并且包装器 div 的 onclick 将切换背景图像以及无线电的检查状态输入.

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.

我需要在 'terms_radio' DIV 上设置 tabindex 索引，只是 div 上的 tabindex="2" 属性不起作用，

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

当光标位于电子邮件输入字段时，是否可以在按 TAB 时将收音机输入标签上的虚线边框向上显示?

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?

推荐答案

DIV元素与tabindex不兼容在 HTML4 中).

DIV elements are not compatible with tabindex in HTML4).

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

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

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

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.

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

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.

把它贴在你的body标签底部，从谷歌CDN获取jQuery:

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

相关文章