使用 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" />