我正在ASP.NET中开发一个注册表单,像往常一样它有很多文本框。
我在文本框中创建了tabindices。
每个输入行都包含在<ul>
标记下。
选项卡索引是按顺序设置的,如图像所示,焦点直接从19跳到22,跳过20和21.请注意,密码字段的选项卡索引20和21由服务器端<div>
标记包围。
我也发现它只使用type="text"
聚焦输入字段,但即使设置了tabIndex属性,也不会关注input="password"
。
我不确定眉毛焦点会跳过标签索引为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>