無法在Firefox中的文本框中跳出標籤

Question

我有一個aspx頁面，其中有幾個文本框字段和單選按鈕，最終創建一個表單供客戶輸入數據。這些信息是您典型的東西，如郵編，地址等。當我在IE和Chrome的頁面上瀏覽頁面上的所有組件時，無論我是否添加任何信息（即文本框），但是在Firefox中，當我選中Zipcode文本框並且只有那一個時，它會停止。在該文本框中有一些驗證正在進行檢查，但也有一些驗證可以正常顯示，並且只發生在Firefox中。我想知道如果這是驗證的東西導致它鎖定，如果我輸入有效的數據，我仍然不能退出它。

我已經嘗試設置標籤索引，以確保它按特定順序進行。給你一個關於它如何佈局的想法我有一個asp：DropDownList，然後是一個asp：TextBox，然後是另一個asp：DropDownList，一旦你選項卡出現，或者在這種情況下，點擊asp：TextBox。我是否需要設置一個事件處理程序來獲取事實，我按Tab鍵才能離開該文本框？如果是這樣，我不完全確定如何做到這一點，但它仍不能解釋爲什麼它在IE和Chrome中運行，而不是Firefox。任何想法將不勝感激。如果您需要更多信息，請與我們聯繫。

這裏是問題

<table class="table-forminput" cellspacing="0"> 
        <tr class="table-forminputrow"> 
         <td class="text-right"> 
          <asp:Label ID="uxLabelEffectiveDate" runat="server" Text="Effective date:" ClientIDMode="Static" /><span class="requiredField">*</span> 
         </td> 
         <td class="text-left"> 
          <asp:DropDownList ID="uxFieldEffectiveDate" runat="server" CssClass="inputselect" 
           ClientIDMode="Static" data-required="required" TabIndex="1"> 
          </asp:DropDownList> 
         </td> 

         <td class="text-right"> 
          <asp:Label ID="uxLabelPhoneNumber" runat="server" Text="Phone number:" ClientIDMode="Static" /> 
         </td> 
         <td class="text-left"> 
          <asp:TextBox ID="uxFieldPhoneNumber" runat="server" ClientIDMode="Static" class="phone" data-mask="999-999-9999" TabIndex="4" /> 
         </td> 
        </tr> 

        <tr class="table-forminputrow"> 
         <td class="text-right"> 
          <asp:UpdatePanel ID="uxUpdatePanelZip" runat="server" UpdateMode="Conditional"> 
           <Triggers> 
            <asp:AsyncPostBackTrigger ControlID="uxFieldZipCode" EventName="TextChanged" /> 
           </Triggers> 
           <ContentTemplate> 
            <asp:Label ID="uxLabelZipCode" runat="server" Text="Zip code:" ClientIDMode="Static" /><span class="requiredField">*</span> 
           </ContentTemplate> 
          </asp:UpdatePanel> 
         </td> 
         <td class="text-left"> 
          <asp:TextBox ID="uxFieldZipCode" runat="server" CssClass="inputtext_short" AutoPostBack="true" ClientIDMode="Static" OnTextChanged="uxFieldZipCode_TextChanged" data-required="required" MaxLength="5" TabIndex="1" /> 
         </td> 
         <td class="text-right"> 
          <asp:Label ID="uxLabelEmailAddress" runat="server" Text="Email address:" ClientIDMode="Static" /> 
         </td> 
         <td class="text-left"> 
          <asp:TextBox ID="uxFieldEmail" runat="server" CssClass="inputtext_date" ClientIDMode="Static" TabIndex="5" /> 
         </td> 
        </tr> 
        <tr class="table-forminputrow"> 
         <td class="text-right"> 
          <asp:Label ID="uxLabelCounty" runat="server" Text="County:" ClientIDMode="Static" /><span class="requiredField">*</span> 
         </td> 
         <td class="text-left"> 

          <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
           <Triggers> 
            <asp:AsyncPostBackTrigger ControlID="uxFieldZipCode" EventName="TextChanged" /> 
           </Triggers> 
           <ContentTemplate> 
            <asp:DropDownList ID="uxFieldCounty" runat="server" CssClass="inputselect" ClientIDMode="Static" data-required="required" TabIndex="2"> 
            </asp:DropDownList> 
           </ContentTemplate> 
          </asp:UpdatePanel> 
         </td> 

        </tr> 

        <tr class="table-forminputrow"> 
         <td class="text-middle text-right" id="uxTDChildOnlyLabel" runat="server"> 
          <asp:Label ID="uxLabelChildOnly" runat="server" Text="Child only coverage?" ClientIDMode="Static" /><span class="requiredField">*</span> 
         </td> 
         <td colspan="4" class="text-middle text-left padding-bottom2" id="uxTDChildOnlyField" runat="server"> 
          <asp:RadioButtonList ID="uxFieldChildOnly" runat="server" RepeatDirection="Horizontal" ClientIDMode="Static" RepeatLayout="Flow" CssClass="radioFlow" TabIndex="3"> 
           <asp:ListItem Value="1">Yes</asp:ListItem> 
           <asp:ListItem Value="2">No</asp:ListItem> 
          </asp:RadioButtonList> 
         </td> 
        </tr> 
       </table> 

的標記下面是郵政編碼驗證專（這是在JavaScript）

 // validate zip code 
    function validateZipCode() { 
     var zipRegEx = /(^\d{5}$)|(^\d{5}-\d{4}$)/; 
     var zipCode = $('#uxFieldZipCode').val(); 
     if (zipCode != '' && !zipRegEx.test(zipCode)) { 
      $('#uxFieldZipCode').addClass("ErrorBackground"); 
      addErrorMessage('<asp:literal ID="uxLiteralInvalidZipError" runat="server" ClientIDMode="Static" Text="Please enter a valid zip code." />'); 

     } 

    } 

Answer 1

曾與我們想通了其他開發人員。由於我們在失去焦點時設置了自動回覆設置，因此如果將按鈕壓入用於驗證的正則表達式中，則必須添加一個事實，即按下該選項卡。