html - TabIndex 未按预期工作

Question

我正在 ASP.NET 中开发注册表单，它像往常一样有很多文本框。我在文本框上创建了标签。每条输入线都包含在 <ul> 下标签。选项卡索引是连续设置的，如图所示，焦点直接从 19 跳到 22，跳过 20 和 21。请注意，带有选项卡索引 20 和 21 的密码字段被服务器端 <div> 包围。标签。

我还想到它只关注输入字段 type="text"但不关注input="password"即使设置了 tabIndex 属性。

我不确定浏览器焦点会跳过标签索引为 20 和 21 的元素的原因是什么，我该如何解决？

代码:

<ul class="divfloatleft height10imp">
    <li class="divfloatleft">
        <div class="contentlabeltext margintop15 width140">
        </div>
    </li>
    <li class="marginleft45">
        <div class="textalignleft marginleft5imp">
            <asp:CompareValidator ID="cvRetypeEmail" ForeColor="Red" Display="Dynamic" ValidationGroup="NormRegistration"
                ControlToCompare="txtEmail" ControlToValidate="txtRetypeEmail" runat="server"
                ErrorMessage=""></asp:CompareValidator>
            <asp:RequiredFieldValidator ID="rfvReTypeEmail" runat="server" ControlToValidate="txtRetypeEmail"
                ValidationGroup="NormRegistration" Display="Dynamic" ForeColor="Red" ErrorMessage=""></asp:RequiredFieldValidator>
        </div>
    </li>
</ul>
<div id="divPassword" runat="server">
    <ul class="divfloatleft">
        <li class="divfloatleft">
            <div class="contentlabeltext margintop29 width140">
                <div class="divfloatleft">
                    <asp:Literal ID="ltPassword" runat="server" Text=""></asp:Literal></div>
                <div class="smallasterix divfloatleft">
                </div>
            </div>
        </li>
        <li class="marginleft45 width500 textalignleft">
            <span class="passwordtext divfloatleft marginleft3imp  width100p">8 Character min. Must
                include number, letter and symbol.</span>
            <br />
            <div class="divfloatleft">
                <div class="divfloatleft width247 marginleft4" title="Password">
                    <asp:TextBox ID="txtPassword" runat="server" TabIndex="20" ToolTip="Password" TextMode="Password"
                        title="Email" CssClass="width247 height27 borderCEE1F4 bordernone" MaxLength="128"></asp:TextBox>
                </div>
                <div class="divfloatleft">
                    <span class="infohelp infohelp marginleft5 margintop5 divfloatleft">
                        <img class="tool-tip-link" src="../../App_Themes/Default/Images/info.png" alt="" />
                        <span class="white-text-content" style="z-index: 2;">

                        </span></span>
                </div>
            </div>
        </li>
    </ul>
    <ul class="divfloatleft height10imp">
        <li class="divfloatleft width140 height10">
            <div class="contentlabeltext width140 height10">
            </div>
        </li>
        <li class="marginleft45 width500"><span class="passwordtext divfloatleft width100p">
        </span>
            <div class="textalignleft marginleft5imp">
                <asp:RequiredFieldValidator ID="rfvPassword" runat="server" ControlToValidate="txtPassword"
                    ValidationGroup="NormRegistration" Display="Dynamic" ErrorMessage=""
                    ForeColor="Red" CssClass="lineheight10" SetFocusOnError="True" />
                <asp:RegularExpressionValidator ID="revPasswordLength" runat="server" ControlToValidate="txtPassword"
                    ValidationGroup="NormRegistration" ErrorMessage=""
                    ForeColor="Red" CssClass="lineheight10" ValidationExpression="^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[^0-9A-Za-z]).{8,50}$"
                    Display="Dynamic" />
                <asp:RegularExpressionValidator ID="RegularExpressionValidator7" runat="server" ControlToValidate="txtPassword"
                    ValidationGroup="NormRegistration" ErrorMessage=""
                    ForeColor="Red" CssClass="lineheight10" ValidationExpression="[\x00-\x80]+" Display="Dynamic" />
            </div>
        </li>
    </ul>
    <ul class="divfloatleft">
        <li class="divfloatleft width140">
            <div class="contentlabeltext margintop19imp divfloatleft">
                <asp:Literal ID="ltConfirmPassword" runat="server" Text=""></asp:Literal></div>
            <div class="smallasterix divfloatleft margintop19imp">
            </div>
        </li>
        <li class="marginleft45 margintop10 textalignleft">
            <div class="textboxstyle">
                <div class="textboxLeft divfloatleft">
                </div>
                <div class="textboxMid divfloatleft width241" title="Retype Password">
                    <asp:TextBox ID="txtRetypePassword" runat="server" TabIndex="21" ToolTip="Confirm Password"
                        TextMode="Password" CssClass="ie7margintop5 ie8margintop5  width241 height35 backgroundtrans bordernone"
                        MaxLength="128"></asp:TextBox>
                </div>
                <div class="textboxRight divfloatleft">
                </div>
            </div>
        </li>
    </ul>
    <ul class="divfloatleft width100p height10imp">
        <li class="divfloatleft width140 height10">
            <div class="contentlabeltext width140 height10">
            </div>
        </li>
        <li class="marginleft45">
            <div class="textalignleft marginleft5imp">
                <asp:CompareValidator ID="cvRetypePassword" runat="server" ControlToCompare="txtPassword"
                    ValidationGroup="NormRegistration" ControlToValidate="txtRetypePassword" ErrorMessage=""
                    ForeColor="Red" Display="Dynamic" />
                <asp:RequiredFieldValidator ID="rfvRetypePassword" runat="server" ControlToValidate="txtRetypePassword"
                    ValidationGroup="NormRegistration" Display="Dynamic" ForeColor="Red" ErrorMessage="" />
            </div>
        </li>
    </ul>
</div>
<ul class="divfloatleft width100p">
    <div class="readagreementtext marginleft190 textalignleft ">
        <asp:Label ID="lblPrivacyText" runat="server"></asp:Label></div>
    <li class="divfloatleft textalignleft margintop10 width140">
        <div class="contentlabeltext margintop5 divfloatleft ">
            <asp:Literal ID="ltValidationText" runat="server" Text=""></asp:Literal>
        </div>
        <div class="smallasterix divfloatleft margintop5">
        </div>
    </li>
    <li class="divfloatleft marginleft45">
        <div class="margintop10">
            <recaptcha:RecaptchaControl ID="recaptcha" runat="server" TabIndex="22" Theme="white"/>
        </div>
    </li>
</ul>
<ul class="divfloatleft width100p">
    <li class="divfloatleft width140 height10">
        <div class="contentlabeltext width140 height10">
        </div>
    </li>
    <li class="marginleft45">
        <asp:Label ID="lblMessage" runat="server" ForeColor="Red"></asp:Label>
    </li>
</ul>
<ul>
    <li class="divfloatleft marginleft160">
        <div>
            <asp:Button ID="btnRegistration" runat="server" CssClass="createaccount marginleft25 margintop12"
                TabIndex="23" CausesValidation="true" ValidationGroup="NormRegistration" OnClick="RegisterButton_Click" />
        </div>
    </li>
</ul>

Answer 1

您是否尝试过将每个控件的制表位属性设置为 true？

另请查看 the solution on this link