ASP.NET Core 2.0 在輸入元素上設置焦點
[英]ASP.NET Core 2.0 set focus on a input element
問題描述
我有一個較舊的 ASP.NET Core MVC razor 部分表單，帶有 2 個輸入字段，我試圖將焦點設置在表單加載的第一個輸入字段上，當用戶更改值時，我想將焦點更改為第二個輸入盒子。 這是我使用 ASP.NET Core 2.0 razor 頁的第一個項目。
問題是當我嘗試使用 HTML、Java 或 razor 代碼設置焦點時，它不起作用。 我希望有人能看到我哪里出錯了。 先感謝您。
更新完整腳本
<script>
$(document).ready(function () {
$('#ordersrefresh').on("click", function (e) {
window.location.reload(true);
});
$('#orderstart').on("click", function (e) {
$('#orderstartpick').empty();
$('#orderstartdrop').empty();
$('#orderstartpriority').empty();
//$('#orderstartmodal').modal({ backdrop: 'static', keyboard: false, show: true });
$.getJSON("/orders/orderlist/picks", function (picks) {
picks.forEach(function (item) {
$('#orderstartpick').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/drops", function (drops) {
drops.forEach(function (item) {
$('#orderstartdrop').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/priorities", function (priorities) {
priorities.forEach(function (item) {
$('#orderstartpriority').append('<option value="' + item + '">' + item + '</option>');
});
});
// shows the partial form
$.getJSON("/orders/orderlist/conn", function (conn) {
if (conn == "true") {
$('#orderstartmodal').modal('show'); //{ backdrop: 'static', keyboard: false, show: true });
$('#orderstartmodal').on('shown.bs.model',function () {
$('#orderstartpick').focus();
})
}
else {
$('#noorderstartmodal').modal('show'); //{ backdrop: 'static', keyboard: false, show: true });
}
});
// Set focus on the drop input after the pick input has changed - Working
$('#orderstartpick').change(function () {
$('#orderstartdrop').focus();
});
});
$('#ordermodif').on("click", function (e) {
$('#ordermodifid').empty();
$('#ordermodifpick').empty();
$('#ordermodifdrop').empty();
$('#ordermodifpriority').empty();
//$('#ordermodifmodal').modal({ backdrop: 'static', keyboard: false, show: true });
$.getJSON("/orders/orderlist/picks", function (picks) {
picks.forEach(function (item) {
$('#ordermodifpick').append('<option value="' + item + '">' + item + '</option>');
});
});
("/orders/orderlist/drops", function (drops) {
drops.forEach(function (item) {
$('#ordermodifdrop').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/priorities", function (priorities) {
priorities.forEach(function (item) {
$('#ordermodifpriority').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/ids", function (ids) {
var idscount = 0;
ids.forEach(function (item) {
$('#ordermodifid').append('<option value="' + item + '">' + item + '</option>');
++idscount;
});
if (idscount > 0) {
$('#ordermodifmodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
else {
$('#noordermodifmodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
});
});
$('#ordermodifmodal').on("shown.bs.modal", function (e) {
var ordermodifid = $('#orderidmodifcurrent').val();
$.getJSON("/orders/orderlist/order", { orderid: ordermodifid }, function (order) {
$('#ordermodifmodal #ordermodifpick').val(order.pick.name);
$('#ordermodifmodal #ordermodifdrop').val(order.drop.name);
$('#ordermodifmodal #ordermodifpriority').val(order.priority);
});
});
$('#ordermodifmodal #ordermodifid').change(function (e) {
var ordermodifid = $(this).find("option:selected").val();
$.getJSON("/orders/orderlist/order", { orderid: ordermodifid }, function (order) {
$('#ordermodifmodal #ordermodifpick').val(order.pick.name);
$('#ordermodifmodal #ordermodifdrop').val(order.drop.name);
$('#ordermodifmodal #ordermodifpriority').val(order.priority);
});
});
function DeleteRenderer(data, type, row) {
var StatusColumn = row.status;
if (StatusColumn.includes("Cancelling") || (StatusColumn.includes("Canceled"))) {
return "<button class='btn btn-outline-info' disable>Delete</button>";
}
else {
return "<button class='btn btn-outline-danger'd>Delete</button>";
}
}
function CancelRenderer(data, type, row) {
var StatusColumn = row.status;
if (StatusColumn.includes("Assigned") || (StatusColumn.includes("Pending"))) {
return "<button class='btn btn-outline-warning'>Cancel</button>";
}
else {
return "<button class='btn btn-outline-info' disabled>Cancel</button>";
}
}
function ModifyRenderer(data, type, row) {
var StatusColumn = row.state;
if (StatusColumn.includes("Assigned") || (StatusColumn.includes("Pending"))) {
return "<button class='btn btn-outline-info'>Modify</button>";
}
else {
return "<button class='btn btn-outline-info' disabled>Modify</button>";
}
}
function DateRenderer(data) {
return moment(data).format('DD/MM/YYYY HH:mm:ss');
}
var table = $('#orders').DataTable({
"processing": false, // for show progress bar
"serverSide": false, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"lengthMenu": [[20, 50, -1], [20, 50, "All"]],
"pagingType": "simple",
"ajax": {
"url": "/Orders/OrderList/data", // for client side /LoadDataAll
"type": "GET", // for client side "GET"
"datatype": "json"
},
"select": 'single',
"columns": [
{ "data": "created", "render": DateRenderer, "autoWidth": true },
{ "data": "wmsid", "name": "WMSID", "autoWidth": true },
{ "data": "index", "name": "OrderID", "autoWidth": true },
{ "data": "pick.name", "name": "Pick", "autoWidth": true },
{ "data": "drop.name", "name": "Drop", "autoWidth": true },
{ "data": "sequence", "name": "Sequence", "autoWidth": true },
{ "data": "status", "name": "Status", "autoWidth": true },
{ "data": "priority", "name": "Priority", "autoWidth": true },
{ "data": "null", "render": ModifyRenderer, "orderable": false },
//{ "data": "null", "render": CancelRenderer, "orderable": false },
//{ "data": "null", "render": DeleteRenderer, "orderable": false },
]
});
$('#orders tbody').on('click', 'button', function () {
var data = table.row($(this).parents('tr')).data();
var buttontext = $(this).text();
var token = $("[name=__RequestVerificationToken]").val();
$('input[name="orderidcurrenthidden"]').val(data.wmsid);
var ordertext = data.wmsid;
if (buttontext.toUpperCase() == 'MODIFY') {
$('#ordermodifpick').empty();
$('#ordermodifdrop').empty();
$('#ordermodifpriority').empty();
$('#orderidmodifcurrent').val($('input[name="orderidcurrenthidden"]').val());
//$('#ordermodifmodal').modal({ backdrop: 'static', keyboard: false, show: true });
$.ajaxSetup({ async: false });
$.getJSON("/orders/orderlist/picks", function (picks) {
picks.forEach(function (item) {
$('#ordermodifpick').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/drops", function (drops) {
drops.forEach(function (item) {
$('#ordermodifdrop').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/priorities", function (priorities) {
priorities.forEach(function (item) {
$('#ordermodifpriority').append('<option value="' + item + '">' + item + '</option>');
});
});
//$.getJSON("/orders/orderlist/ids", function (ids) {
// var idscount = 0;
// ids.forEach(function (item) {
// $('#ordermodifid').append('<option value="' + item + '">' + item + '</option>');
// ++idscount;
// }
//});
$.getJSON("/orders/orderlist/conn", function (conn) {
if (($('#ordermodifpick option').length > 0) &&
($('#ordermodifdrop option').length > 0) &&
($('#ordermodifpriority option').length > 0) &&
(conn == "true")) {
$('#ordermodifmodal .modal-title').text('MODIFY ORDER: ' + ordertext);
$('#ordermodifmodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
else {
$('#noordermodifmodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
});
$.ajaxSetup({ async: true });
}
else if (buttontext.toUpperCase() == 'CANCEL') {
$.post('/orders/orderlist?handler=ordercancel', {
orderid: data.wmsid,
__RequestVerificationToken: token,
}, function (strResult) {
if (strResult == "true") {
$('#ordercancelmodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
else {
$('#noordercancelmodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
});
}
else if (buttontext.toUpperCase() == 'DELETE') {
$.post('/orders/orderlist?handler=orderdelete', {
orderid: data.wmsid,
__RequestVerificationToken: token,
}, function (strResult) {
if (strResult == "true") {
$('#orderdeletemodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
else {
$('#noorderdeletemodal').modal({ backdrop: 'static', keyboard: false, show: true });
}
});
}
});
setInterval(function () {
table.ajax.reload(null, false); // user paging is not reset on reload
}, 5000);
$(window).on('resize', function () {
$('#orders').attr("style", "");
table.columns.adjust();
});
$("input[id$='orderstartpick']").focus();
});
</script>
腳本
$('#orderstart').on("click", function (e) {
$('#orderstartpick').empty();
$('#orderstartdrop').empty();
$('#orderstartpriority').empty();
//$('#orderstartmodal').modal({ backdrop: 'static', keyboard: false, show: true });
$.getJSON("/orders/orderlist/picks", function (picks) {
picks.forEach(function (item) {
$('#orderstartpick').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/drops", function (drops) {
drops.forEach(function (item) {
$('#orderstartdrop').append('<option value="' + item + '">' + item + '</option>');
});
});
$.getJSON("/orders/orderlist/priorities", function (priorities) {
priorities.forEach(function (item) {
$('#orderstartpriority').append('<option value="' + item + '">' + item + '</option>');
});
});
// shows the partial form
$.getJSON("/orders/orderlist/conn", function (conn) {
if (conn == "true") {
$('#orderstartmodal').modal('show'); //{ backdrop: 'static', keyboard: false, show: true });
}
else {
$('#noorderstartmodal').modal('show'); //{ backdrop: 'static', keyboard: false, show: true });
}
});
// set focus on the pick input on form load - Not working on load
$('#orderstartmodal').on('shown.bs.model', function () {
$('#orderstartpick').focus();
});
// Hide the submit button by class name on form load - Not working on load
$('#orderstartmodal').on('shown.bs.model', function () {
$('#submitbtn').hide();
});
// Set focus on the drop
input after the pick input has
changed - Working
$('#orderstartpick').change(function () {
$('#orderstartdrop').focus();
});
});
我的.cshtml頁面中的部分表單代碼
<div id="orderstartmodal" class="modal fade" tabindex="-1" role="dialog">
<form method="post" asp-page-handler="orderstart">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:blanchedalmond">
<h5 class="modal-title font-italic" id="orderstartmodaltitle" value="">START ORDER</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="background-color:burlywood">
<table class="table table-sm">
<tbody>
<tr>
<td align="right" width="50%">
<div class="form-group">
<label for="orderstartpick" class="col-form-label">Pick Stn.:</label>
@*<select id="orderstartpick" name="orderpick" class="select-picker" style="width:60%"></select>*@
<input type="text" autofocus="autofocus" id="**orderstartpick**" name="orderpick" style="width:60%">
@*<script type="text/javascript">document.getElementById('orderstartpick').focus();</script>*@
@*<script>document.getElementById('orderstartpick').focus();</script>*@
@* <script type="text/javascript">
$(document).ready(function () {
$(function () {
$('#orderstartpick').focus();
});
});
</script>*@
</div>
</td>
<td align="right" width="50%">
<div class="form-group">
<label for="orderstartdrop" class="col-form-label">Drop Stn.:</label>
@*<select id="orderstartdrop" name="orderdrop" class="select-picker" style="width:60%"></select>*@
<input runat="server" type="text" id="**orderstartdrop**" name="orderdrop" style="width:60%">
</div>
</td>
</tr>
<tr style="visibility:collapse">
<td align="right" width="50%">
<div class="form-group">
<label hidden="hidden" for="orderstartpriority" class="col-form-label">Priority:</label>
<select hidden="hidden" id="orderstartpriority" name="orderpriority" class="select-picker" style="width:60%"></select>
</div>
</td>
<td width="50%">
<div hidden="hidden" class="form-group">
</div>
</td>
</tr>
<tr>
<td align="center" valign="middle" colspan="2">
<div class="form-group">
<label for="orderstartinfo" class="col-form-label">Select/Verify Parameters And Then Click:</label>
</div>
<div class="form-group">
<button runat="server" type="submit" class="btn btn-primary">START ORDER</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer" style="background-color:blanchedalmond">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</form>
</div>
我嘗試了 HTML 焦點代碼、Fava 代碼和 razor 代碼，但沒有嘗試將焦點設置為輸入一個。
1 個解決方案
解決方案1
0 已采納 2022-11-28 07:38:56
更新：
// shows the partial form
$.getJSON("/orders/orderlist/conn", function (conn) {
if (conn == "true") {
$('#orderstartmodal').modal('show');
$('#orderstartmodal').on('shown.bs.modal', function () {
$('#orderstartpick').focus();
})
}
else {
$('#noorderstartmodal').modal('show'); //{ backdrop: 'static', keyboard: false, show: true });
}
});
注意：如您所見，在您的code snippet中，我可以在加載模式時看到if conditional 。 在加載模態后，您應該在下面的代碼 sippet 下加載：
$('#orderstartmodal').on('shown.bs.modal', function () {
$('#orderstartpick').focus();
})
我嘗試了 HTML 代碼作為焦點，Java 代碼和 razor 代碼，但沒有嘗試將焦點設置為輸入一個。
那么，在這種情況下，您必須在主視圖中編寫您的focus script ，而不是在部分頁面中。 您可以執行以下操作：
輸入焦點腳本：
$(document).ready(function () {
$(function () {
$('#orderstartmodal').modal('show');
});
$('#orderstartmodal').on('shown.bs.modal', function () {
$('#orderstartpick').focus();
})
$("#orderstartpick").change(function () {
$('#orderstartdrop').focus();
});
});
注意：此腳本需要放置在您調用局部視圖的主頁下方。 如您所見，我使用了change和onmouseover兩者都會執行。 但是，根據您的描述，您需要on change事件，然后將焦點設置到下一個input box ： $('#orderstartdrop').focus();
Output：
注意：由於您還沒有分享您的主頁詳細信息，所以我只是在另一個頁面下方加載。
在Asp.net Core 2.0中，IHostingEnvironment是可擴展的
[英]In Asp.net Core 2.0 is IHostingEnvironment extendable
ASP.NET Core 2.0 - AddAuthentication 和 DefaultScheme
[英]ASP.NET Core 2.0 - AddAuthentication and DefaultScheme
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
在ASP.Net MVC Core 2.0中設置登錄URL
未設置 ASP.NET Core 2.0 身份驗證 Cookie
ASP.NET Core 2.0 中RequiredAttribute 的本地化
ASP.NET Core 2.0請求失敗
ASP.NET Core 2.0身份驗證不起作用
在Asp.net Core 2.0中，IHostingEnvironment是可擴展的
ASP.NET Core 2.0-Razor-授權
Asp.Net Core 2.0中的遞歸
ASP.NET Core 2.0中的網址重寫
ASP.NET Core 2.0 - AddAuthentication 和 DefaultScheme
相關標簽