TabIndex ne fonctionne pas comme prévu

Je suis en train d'élaborer un formulaire d'inscription ASP.NET comme d'habitude il y a beaucoup de zones de texte.
J'ai créé tabindices sur la zone de texte.
Chaque ligne de saisie est inclus dans <ul> tag.
L'onglet index sont mis en série, comme montré dans l'image, l'accent passe de 19 à 22 directement, en sautant 20 et 21. Notez que les champs de mot de passe avec l'onglet index 20 et 21 entouré par côté serveur <div> tag.

Il a également eu lieu pour moi qu'il ne met l'accent que les champs de saisie avec type="text" mais ne met pas l'accent sur input="password" même si la propriété tabIndex est réglé.

TabIndex ne fonctionne pas comme prévu

Je ne suis pas sûr de ce qui est la raison que sur broweser l'accent saute elemnts avec l'onglet index 20 et 21 et comment puis-je résoudre ce problème?

code:

<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>
pourriez-vous fournir un jsfiddle ou le site de travail pour le tester?
Je vais essayer. Il y a d'énormes code avec elle.
juste la bande vers le bas pour un morceau de code qui montre le problème (juste la forme, par exemple, css probablement pas nécessaire si votre problème se produit sans elle) si vous ne trouvez aucun moyen de le recréer dans un petit extrait de code que vous pourriez trouver votre propre solution de votre js, css ou quoi que ce soit 🙂

OriginalL'auteur MaxRecursion | 2013-12-05