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>

这是专门针对zipcode的验证（在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

与另一位开发者合作，我们发现了它。由于我们在焦点丢失时设置了autopostback，因此我们不得不添加一个事实，即如果将标签按入用于验证的正则表达式，则会按下该标签。

无法在Firefox中的文本框中跳出标签

1 个答案: