Question

我有一个简单的jQuery弹出窗口，其中显示了4个字段。当我从一个字段切换到下一个字段时，标签不会在最后一个字段中停止，它会直接跳到第一个字段。在此示例中，选项卡不会在“ DDLPMStartMonth ”下拉列表中停止。弹出窗口中的最后一个字段是什么类型的控件并不重要，因为我有类似的弹出窗口，其中最后一个字段是一个简单的文本框。

很遗憾我无法上传图片

链接到表格的图片：pop-up message

对可能导致此行为的原因提出任何建议？

HTML如下所示：

<div id="dvPMpopupEditor" class="MainPopUp" style="display: none">
    <div class="popupTitleBar-purple">
        <div class="title">
            <h2><label id="lblHeadingLabel">Add Membership</label></h2>
        </div>
        <div class="close" onclick="CancelPopupSettings()" >
            <span class="dashboardIcons closeIcon"></span>
        </div>
    </div>

    <div class="popupContent">
        <div class="required MembershipAdded" style="display:none; float:left;">Membership added.</div>
        <div class="required fr">* indicates required field</div>
        <div class="clear"></div>

        <asp:TextBox ID="PMOrderHiddenField" CssClass="PMOrderHiddenField" runat="server" Style="display: none" />
        <asp:TextBox ID="PMUserIDHiddenField" CssClass="PMUserIDHiddenField" runat="server" Style="display: none" />
        <asp:TextBox ID="PMPDEVIDHiddenField" CssClass="PMPDEVIDHiddenField" runat="server" Style="display: none" />

        <!-- MembershipName-->
        <div>
            <span class="frmlabel">

                <asp:Label ID="NameOfInstitutionLabel" runat="server" AssociatedControlID="txtMembershipName" Text="Name of professional body:" />
                <span class="frmrequired">*</span>
            </span>
            <div class="fl">
                <asp:TextBox ID="txtMembershipName" CssClass="width300 txtMembershipName" runat="server"  MaxLength="100" />
                <div class="mandatory MembershipNameRequired" style="display:none">Please enter an membership Name.</div>
<%--                <br /><asp:RegularExpressionValidator ID="revMembershipName" CssClass="required revMembershipName" runat="server" ControlToValidate="txtMembershipName" ErrorMessage="Please only use alphanumeric characters" ValidationExpression="^((?!&#)[A-Za-z0-9-' .,/\\])*$" Display="Dynamic" EnableClientScript="true" />--%>
            </div>
            <div class="clear"></div>
        </div>
        <!-- /MembershipName-->

        <!--MembershipStatus-->
        <div>
            <span class="frmlabel">

                <asp:Label ID="Label6" runat="server" AssociatedControlID="txtMembershipStatus" Text="Membership Status:" />
                <span class="frmrequired">*</span>
            </span>
            <div class="fl">
                <asp:TextBox ID="txtMembershipStatus" CssClass="width300 txtMembershipStatus" runat="server"  MaxLength="50" />
                <div class="mandatory MembershipStatusRequired" style="display:none">Please enter your membership status.</div>
<%--                <br /><asp:RegularExpressionValidator ID="revMembershipStatus" CssClass="required revMembershipStatus" runat="server" ControlToValidate="txtMembershipStatus" ErrorMessage="Please only use alphanumeric characters" ValidationExpression="^((?!&#)[A-Za-z0-9-' .,/\\])*$" Display="Dynamic" EnableClientScript="true" />--%>
            </div>
            <div class="clear"></div>
        </div>
        <!--/MembershipStatus-->


        <%--Start Date--%>
        <span class="frmlabel">
            <asp:Label ID="StartDateLabel" runat="server" AssociatedControlID="DDLPMStartMonth" Text="Date Membership commenced:" />
            <span class="frmrequired">*</span>
        </span>
        <div class="fl">
            <asp:DropDownList ID="DDLPMStartMonth" DataSourceID="dsMonths" DataTextField="Value" DataValueField="Key" runat="server" CssClass="profileB-DDL DDLPMStartMonth"/>
            <asp:ObjectDataSource ID="dsMonths" runat="server" SelectMethod="GetListForDropDown" TypeName="Eteach.Workflow.Lookup">
                <SelectParameters>
                    <asp:Parameter DefaultValue="Month" Name="name" Type="String" />
                    <asp:Parameter DefaultValue="Month" Name="pleaseSelectKey" Type="String" />
                </SelectParameters>
            </asp:ObjectDataSource>
            <asp:DropDownList ID="DDLPMStartYear" runat="server" CssClass="profileB-DDL DDLPMStartYear" />
            <div class="required PMStartDateRequired" style="display:none">Please enter a commencement date.</div>
        </div>

        <div class="clear"></div>
        <%--/Start Date--%>



    </div>
    <div class="clear"></div>

    <div class="PopupButton">
        <div class="fr">
            <div class="fl marRight10">
                <a href="#" id="SaveandAddImgBtn" class="btn btn-main btn-reg" alt="SaveAndAddNew" onclick="AddMembership('new')" >Save and add another entry</a>
            </div>
            <div class="fl marRight10">
                <a href="#" id="SaveImgBtn" class="btn btn-second btn-reg btn-width" alt="Save" onclick="AddMembership()" >Save</a>
            </div>
            <div class="fl">
                <a href="#" id="CancelImgBtn" class="btn btn-second btn-reg btn-width" alt="Exit" onclick="CancelPopupSettings()" >Cancel</a>
            </div>

            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>

</div>

显示弹出窗口的代码函数ShowPMBlock（UIID）{

    $.blockUI({
        message: $("#dvPMpopupEditor"),
        title: 'Add Membership',
        theme: false,
        css: { background: 'none', border: 'none', top: GetBlockUITopWithSize(600), width: '800px', margin: 'auto', left: GetBlockUILeftWithSize(800), cursor: 'default' },
        overlayCSS: { backgroundColor: '#000', opacity: '0.5', cursor: 'default' }
    });
}

function GetBlockUITopWithSize(iSize) {
    var i = 0;
    i = ($(window).height() - iSize) / 2;
    return i;
}

function GetBlockUILeftWithSize(iSize) {
    var i = 0;
    i = ($(window).width() - iSize) / 2;
    return i;
}

制表符停止跳过jQuery弹出窗口中的最后一个字段

0 个答案: