0

我有一个弹出屏幕，用于向我们的系统添加付款。在这个页面中是一个使用 DIV 的手工构建的选项卡控件。我想要做的是当用户单击选项卡时，加载选项卡并将焦点设置在选项卡内的事务控制上。我有管理选项卡控件的 java 脚本。

我想要做的是在选项卡“按钮”的 OnClick 事件上切换到选项卡并将焦点设置在事务 ID 文本框上。

这是页面的精简版：

<asp:Content  runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
                <div style="width: 100%; height: 32px; padding-top: 4px; padding-left: 4px;">

            <div class="Property StackPanelItem-Left">
                <div class="PropertyLabel" id="divPaymentTypeLabel" runat="server">
                    Select payment type:
                </div>
            </div>
             <div class="Property StackPanelItem-Left">
                <asp:DropDownList ID="ddlPaymentType" runat="server" TabIndex="1"
                    Width="150px" AutoPostBack="true"
                    DataTextField="PAYMENT_TYPE_DESC" DataValueField="PAYMENT_TYPE"
                    OnSelectedIndexChanged="ddlPaymentType_SelectedIndexChanged">
                </asp:DropDownList>
            </div> 
        </div>

        <div id="tabControl1" class="Region-TabControl" style="height: calc(100% - 80px);">

            <div id="tabControl1.TabButtons-Breadcrumbs" class="Region-Header-TabControl Region-Header-Color-Silver" style="text-shadow: none !important;">
                <div id="tabButton.PayeeInfo" class="Breadcrumb Breadcrumb-Normal"  onclick="SetPayeeInfoFocus()" >
                    <div class="Breadcrumb-Text">
                        Payee Info
                    </div>
                </div>
                <div id="tabButton.PayeeContact"  class="Breadcrumb Breadcrumb-Normal" >
                    <div class="Breadcrumb-Text">
                        Payee Contact
                    </div>
                </div>
                <div id="tabButton.PayeeAddress"  class="Breadcrumb Breadcrumb-Normal"  >
                    <div class="Breadcrumb-Text">
                        Payee Address
                    </div>
                </div>
                <div id="tabButton.PayeeBank"  class="Breadcrumb Breadcrumb-Normal" >
                    <div class="Breadcrumb-Text">
                        Payee Bank
                    </div>
                </div>
                <div id="tabButton.PaymentInfo"  class="Breadcrumb Breadcrumb-Normal" onclick="SetEnterScreenFocus()" >
                    <div class="Breadcrumb-Text">
                        Payment Info
                    </div>
                </div>
                <div id="tabButton.Review"  class="Breadcrumb Breadcrumb-Normal" >
                    <div class="Breadcrumb-Text">
                        Review
                    </div>
                </div>
            </div>

            <div id="tabControl1.Panel" class="Region-Content-TabControl" style="height: calc(100% - 40px);">                                           
                <div id="tabPanel.PayeeInfo" class="TabPanel">
                </div>                                                                      
                <div id="tabPanel.PayeeContact" class="TabPanel" style="height: calc(100% - 8px);">                       
                    <div class="PropertyLabel" style="font-size: 16px; width: calc(100% - 20px); height: 32px; margin: 4px">
                            Select or add payee contact:
                    </div>                      
                    <uc1:PayeeContacts runat="server" ID="PayeeContact" GridHeight="calc(100% - 36px)" />                    
                </div>

                <div id="tabPanel.PayeeAddress" class="TabPanel" style="height: calc(100% - 8px);">                       
                    <div class="PropertyLabel" style="font-size: 16px; width: calc(100% - 20px); height: 32px; margin: 4px">
                            Select or add payee address:
                    </div>
                    <uc1:PayeeAddresses runat="server" ID="PayeeAddress" GridHeight="calc(100% - 36px)" />
                </div>

                <div id="tabPanel.PayeeBank" class="TabPanel" style="height: calc(100% - 8px);">                       
                    <div class="PropertyLabel" style="font-size: 16px; width: calc(100% - 20px); height: 32px; margin: 4px">
                            Select or add payee bank:
                    </div>
                    <uc1:PayeeBanks runat="server" ID="PayeeBank" GridHeight="calc(100% - 36px)" />
                </div> 

                <div id="tabPanel.PaymentInfo" class="TabPanel">                       
                    <div class="PropertyLabel" id="divEnterPaymentInfoHeader" runat="server" style="font-size: 16px; border-bottom: 1px solid #000; width: calc(100% - 20px); height: 32px; margin: 4px">
                            Enter your payment information:
                    </div>

                        <div style="padding-top: 4px; padding-left: 4px; height: 52px; width: 100%;">
                            <div class="Property StackPanelItem-Left">
                                 <div class="PropertyLabel">
                                    Transaction ID
                                </div>
                                <asp:TextBox ID="txtEnterTransactionID" Width="175" MaxLength="20" TabIndex="2" CssClass="PropertyTextBox"  runat="server"/>
                            </div>
                            <div class="Property StackPanelItem-Left">
                                 <div class="PropertyLabel">
                                    Account Number with Payee
                                </div>
                                <asp:TextBox ID="txtEnterAccountNumber" MaxLength="22" Width="175" TabIndex="3" CssClass="PropertyTextBox" runat="server"/>
                            </div>
                            <div class="Property StackPanelItem-Left" id="divEnterPaymentInfo_CheckNumber" runat="server">
                                 <div class="PropertyLabel">
                                    Check Number
                                </div>
                                <asp:TextBox ID="txtEnterCheckNumber" MaxLength="15" TabIndex="4" CssClass="PropertyTextBox"  runat="server"/>
                            </div>
                        </div>                                                                                                                                                                     
                    </div> 
                <div id="tabPanel.Review" class="TabPanel">                                                 
                </div>
           </div>
         </div>              
         <div style="width: 100%; height: 32px; padding-top: 4px; padding-left: 4px;">
            <div class="Property StackPanelItem-Right">
                <asp:Button  ID="btnBack" Text="Back" runat="server"/>                        
                <asp:Button ID="btnNext" Text="Next" runat="server"/>
            </div>
        </div>

</asp:Content>

这是我正在使用的 jquery：

功能 SetEnterScreenFocus() {

document.getElementById("ContentPlaceHolder1_txtEnterDRCTransactionID").focus();

}

我此时使用测试只是因为我试图验证元素是否正在加载。

jquery 找到对象但焦点不起作用。我在这里想念什么？

提前致谢。

4

1 回答 1

0

好的 发现问题 - 这是一个时间问题。这就是我解决它的方法：

function SetEnterScreenFocus() {
    $('tabPanel.PaymentInfo').show();
    setTimeout(function () { document.getElementById('ContentPlaceHolder1_txtEnterTransactionID').focus(); }, 10);
}

有效 - 不确定这是否还有其他问题。

于 2013-10-24T20:25:27.770 回答