首页 文章

div上的标签索引

提问于
浏览 次
31

请参阅下面的表单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索引，只是tab上的tabindex =“2”属性不起作用，

当光标位于电子邮件输入字段时，是否可以在按TAB时将无线电输入标签上的虚线边框带上？

html input radio-button label tabindex

5 回答

  • -1

    DIV元素与tabindex in HTML4不兼容 .

    （ NOTE HTML 5规范 does 允许这样，但它通常无论如何都有效）

    以下元素支持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');
        }
    });
});
    回复于
  • 30

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

    回复于
  • 0

    您只需将tabindex值从2更改为0即可 .

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

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

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

    回复于
  • 16

    您可以将tabindex =“2”用于无线电元素并隐藏无线电元素（不使用display：none，但使用z-index，以使其保持可列表状态） . 当您在电子邮件输入字段上按Tab键时，无线电将获得焦点，您可以使用

    input:focus+label {}

    标签的样式

    回复于
  • 3

    jSFiDDLE

    $(document).ready(function() {
lastIndex = 0;
$(document).keydown(function(e) {
    if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex");
    if (e.keyCode == 9) {
        if (e.shiftKey) {
            //Focus previous input
            if (thisTab == startIndex) {
                $("#" + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus();
                return false;
            }
        } else {
            if (thisTab == lastIndex) {
                $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
                return false;
            }
        }
    }
});
var setTabindexLimit = function(x, fancyID) {
        console.log(x);
        startIndex = 1;
        lastIndex = x;
        tabLimitInID = fancyID;
        $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
    }
/*Taking last tabindex=10 */
setTabindexLimit(10, "Selector_With_Where_Tab_Index_You_Want");
});

    setTabindexLimit() 函数两个属性 10 这是Div中的最后一个Tabindex， Selector_With_Where_Tab_Index_You_Want 是div的类或ID你想要tabindex重复 .

    回复于

相关问题