У меня есть всплывающий экран, используемый для добавления платежей в нашу систему. На этой странице находится вкладка с ручным вводом с использованием DIV. То, что я пытаюсь сделать, - это когда пользователь нажимает на вкладку, загружает вкладку и задает фокус на контроле транзакций на вкладке. У меня есть java-скрипт, который управляет элементом управления вкладками.
То, что я пытаюсь сделать, это то, что в событии OnClick вкладка "кнопка" переключается на вкладку и устанавливает фокус на текстовом поле "Идентификатор транзакции".
Ниже приведена уменьшенная версия страницы:
<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 находит объект, но фокус не работает. Что мне здесь не хватает?
Заранее спасибо.
Ok Нашел вопрос - это была проблема времени. Вот как я это решил:
function SetEnterScreenFocus() {
$('tabPanel.PaymentInfo').show();
setTimeout(function () { document.getElementById('ContentPlaceHolder1_txtEnterTransactionID').focus(); }, 10);
}
Работы - не уверены, есть ли еще какие-то проблемы.