使用 ASP.NET Core MVC 提交后重新关注文本框

Question

我正在尝试在我的项目中引入动态搜索功能。 我在我的视图中创建了一个在keyup上提交的搜索表单，但我没有面临的问题是，当视图重新加载时，文本框不再是焦点，因此用户需要重新单击它，这显然不是不理想。

我的观点是这样设置的：

<form id="searchForm" asp-action="Index" method="get">

    <div class="row">
        <div class="col-9">
            <input type="text" id="fooSearch" name="searchString" value="@ViewData["currentFilter"]" class="form-control" />
        </div>
        <div class="col-3">
            <div class="row">
                <div class="col-6">
                    <input type="submit" value="Search" class="btn btn-outline-secondary form-control" />
                </div>
                <div class="col-6">
                    <a asp-action="Index" asp-route-recent="true" class="btn btn-outline-secondary form-control">Recent</a>
                </div>
            </div>
        </div>
    </div>
</form>

使用以下 JQuery 脚本提交keyup

        $(function () {
            $('#fooSearch').keyup(function () {
                $('#searchForm').submit();
            });
        });
    </script>

任何人都可以帮助我在加载 DOM 时将注意力集中在搜索文本框上吗？

Answer 1

要将焦点返回到搜索栏，您可以使用 jQuery 的focus() ，例如：

$("#fooSearch").focus();

现在，你把它放在哪里取决于你的表单提交是同步的（并使页面重新加载）还是异步的。

如果提交是异步的，那么你可以把它放在你的keyup事件处理程序中， keyup在提交的代码之后：

$('#fooSearch').keyup(function () {
    $('#searchForm').submit();
    $("#fooSearch").focus(); //focus back on the search bar
});

否则，您将需要从onload事件调用focus() ：

$(document).ready(function() {
    $("#fooSearch").focus();
});

Answer 2

在所有情况下，首先加载或重新加载（提交），重点应该放在搜索文本框上，所以我认为您可以将文本框放在加载上。

$(function() { $("#fooSearch").focus();});

您可能遇到的问题是光标不会位于关键字的末尾。 所以我认为这里最好的选择是在用户每次更改关键字时使用 Ajax 来更新结果。 也许在每次更新之前等待几秒钟也是一个好主意。

Answer 3

如果您使用的是 html5，您可以将自动对焦添加到您的 html 标签中，例如：

<input type="text" id="fooSearch"  autofocus ="autofocus" name="searchString" value="@ViewData["currentFilter"]" class="form-control" />