ASP，在输入后聚焦文本框

Question

我有一个问题，我有一个应用程序，用户必须尽可能少地使用鼠标，因此他们将仅使用键盘插入条目。为此，我使用了一个模态弹出窗口，每次用户按 Enter 时，模态都准备好进入下一个条目。但为此，必须在每个 Enter 键之后聚焦第一个模态文本框。我在实现这一点时遇到了问题... 我的代码：

一个按钮只需调用模态：

<asp:Button ID="btnLotIng_Lotear" runat="server" Text="Crear Lotes" class="btn btn-primary btn-block mb-3"
OnClick="Crear_Lotes" OnClientClick="focusear()"  />

面板：

<asp:LinkButton ID="lnkFake_LotIng" runat="server"></asp:LinkButton>
<asp:Panel ID="pnl_LotIng" runat="server" CssClass="modalPopup" Style="display: none;">
<div style="overflow-y: auto; overflow-x: hidden; max-height: 750px; max-width: 1100px">
<div class="modal-body">
<table class="table table-sm table-hover">
<tbody>
<tr>
<th scope="row">Lote Numero</th>
<td colspan="3">
<asp:TextBox ID="txtLogIng_LotNum" runat="server" CssClass="form-control inputfield text-uppercase"
Font-Size="Large" Font-Bold="true" onkeydown="LotNKey(event)"></asp:TextBox>
</td>
</tr>
<tr>
<th scope="row">Id1Desde</th>
<td>
<asp:TextBox ID="txtLogIng_Id1Des" runat="server" CssClass="form-control inputfield text-uppercase"
Font-Size="Small" onkeydown="id1DKey(event)"></asp:TextBox>
</td>
<th scope="row">Id1Hasta</th>
<td>
<asp:TextBox ID="txtLogIng_Id1Has" runat="server" CssClass="form-control inputfield text-uppercase"
Font-Size="Small" onkeydown="id1HKey(event)"></asp:TextBox>
</td>
</tr>
<!-- here go other rows with textboxes -->
</tbody>
<p id="keyb" style="display: none;"></p>
<!-- utilizamos este control para captar el key presionado -->
</table>
</div>
<div align="center" class="modal-footer">
<div class="row">
<div class="col-md-12">
<asp:HiddenField ID="hfLotIngId" runat="server" Value="0" />
<asp:Button ID="btnSave" runat="server" Text="Crear" class="btn btn-success" OnClick="Lote"
ValidationGroup="LotIng" UseSubmitBehavior="false" data-dismiss="alert"></asp:Button>
<!-- UseSubmitBehavior="false" sirve para que se pueda ejecutar accion en el modal -->
<button id="btnCancelIng" runat="server" class="btn btn-primary">
Cancelar
</button>
</div>
</div>
</div>
</div>
</asp:Panel>

<%--mpeAddUpdateCaja Modal Popup Extender For pnlAddUpdateClienteDetails--%>
<uc:ModalPopupExtender ID="mpeLotIngreso" runat="server" PopupControlID="pnl_LotIng"
TargetControlID="lnkFake_LotIng" BehaviorID="mpeLotIngreso" CancelControlID="btnCancelIng"
BackgroundCssClass="modalBackground">
</uc:ModalPopupExtender>

调用模态：

protected void Crear_Lotes(object sender, EventArgs e)
{
lblHeading_LotIng.Text = "Creacion de Lote";
mpeLotIngreso.Show(); // show the modal
txtLogIng_Id1Des.Text = string.Empty;
txtLogIng_Id1Des.Focus(); // this is not working on modal calling   :(
}

在此之后，我尝试使用javascript：

<!-- when user press enter I execute a counter for the next entry (this works)   :) -->
<script type="text/javascript">
$(document).keypress(function (e) {
if (e.keyCode === 13) {
$("#<%= btnSave.ClientID %>").click();
return false;
}
});
</script>
<!-- I try focusing using jquery... not work    :(
<script type="text/javascript">
$("#mpeLotIngreso").on("shown.bs.modal", function () {
//$("#txtLogIng_Id1Des").focus();
$('<%=txtLogIng_Id1Des.ClientID%>').focus();
})
</script>
-->
<!-- I try to using OnClientClick in the button what calls the modal... but not work  :(
<script type="text/javascript">
function focusear() {
console.log('Im in focusear ');
$('<%=txtLogIng_Id1Des.ClientID%>').focus(); // not work
return false;
}
</script>

Answer 1

与其只.Focus，不如试试这个：

Form.DefaultFocus = txtLogIng_Id1Des.UniqueID;

Answer 2

我使用 jq 找到了解决方案：

<!-- jq + js para que con c/enter se ubique el focus en el 1er Textbox  -->
<script type="text/javascript">
$(document).ready(function () {
console.log('Aqui estoy'); // just checking
document.getElementById('<%=txtLogIng_Id1Des.ClientID%>').focus();
});
</script>