html ASP.NET Core 2.0将焦点设置在输入元素上

yx2lnoni  于 2022-12-02  发布在  .NET
关注(0)|答案(1)|浏览(170)

我有一个旧的ASP.NET核心MVC剃刀部分表单，有2个输入字段，我试图设置焦点在表单加载的第一个输入字段上，当用户改变值时，我想然后改变焦点到第二个输入框。这是我的第一个项目与ASP.NET核心2.0剃刀页工作。
问题是当我尝试使用HTML、Java或剃刀代码设置焦点时，它不起作用。我希望有人能看到我哪里出错了。提前谢谢你。
更新完整脚本

<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">&times;</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代码的焦点，法瓦代码，剃刀代码，但没有东西试图设置焦点输入一。

Html

1条答案

按热度按时间
zc0qhyus

zc0qhyus1#

更新日期：

// 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。您应该在加载模态后立即加载以下代码片段：

$('#orderstartmodal').on('shown.bs.modal', function () {
            $('#orderstartpick').focus();
        })

我尝试了HTML代码的焦点，Java代码，剃刀代码，但没有东西试图设置焦点输入一。
在这种情况下，你必须把你的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();
输出：

**注意：**由于您还没有分享您的主页详细信息，所以我刚刚加载了下面的另一个页面。

赞(0）分享  回复(0）举报  2022-12-02
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com