C# 使用ASP.NET核心MVC提交后，请重新关注文本框

我试图在我的项目中引入一个动态搜索功能。我已经在我的视图中创建了一个搜索表单，它在

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>

---

加载DOM时，有人能帮我保持搜索文本框的焦点吗？

要将焦点返回到搜索栏，可以使用jQuery的

focus（）

，例如：

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

现在，放置位置取决于表单提交是同步的（并使页面重新加载）还是异步的

如果提交是异步的，那么您可以将其放在

keyup

事件处理程序中，就在提交的代码之后：

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

否则，您需要从

onload

事件调用

focus（）

：

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

---

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

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

---

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

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

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

您是否尝试过preventdefault？在以某种方式（本地存储等）提交store document.active元素之前，然后在页面加载时将焦点设置为表单submit asynchronous？还是页面正在重新加载？

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