如何在没有 Javascript 的情况下将焦点设置到页面顶部？

Posted 2023-03-27

【中文标题】如何在没有 Javascript 的情况下将焦点设置到页面顶部？

【英文标题】：How do I set focus to the top of a page without Javascript?

【发布时间】：2021-06-09 01:26:33

【问题描述】：

有没有办法在 Blazor 中不使用 javascript 转到页面顶部？我有一个项目列表，用户可以单击其中一个进行编辑并在页面顶部查看更多详细信息。我正在为我的组件使用 MudBlazor。

【问题讨论】：

看来您根本无法在没有 JavaScript 的情况下使用 Blazor，您为什么要问这个？此外，您不能“聚焦”页面的一部分，您只能滚动到页面上的一个点 - 只有<form> 控件（例如<input> 等）和带有@987654323 的元素@ 可以聚焦。

【参考方案1】：

使用 .NET 5.0，您现在拥有 FocusAsync()

<input @ref="exampleInput" />
<button @onclick="ChangeFocus">Focus the Input Element</button>
@code 
    private ElementReference exampleInput;
    private async Task ChangeFocus()
    
        await exampleInput.FocusAsync();
    

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-5.0#focus-an-element

【讨论】：

焦点会移到页面顶部吗？

它将焦点设置在您输入的任何位置。不幸的是，这不适用于 MudBlazor MudText 字段。我已向 MudBlazor 团队提出添加此功能的请求。

实际上，这确实适用于 MudBlazor！查看此页面上的焦点部分 - mudblazor.com/components/textfield 我的错误是我尝试了 MudText，而我应该尝试使用 MudTextField。

【参考方案2】：

为了到达页面顶部，我使用 NavigationManager 导航到同一页面，并将 forceLoad 设置为 false（默认值）

    @inject NavigationManager NavigationManager

    NavigationManager.NavigateTo($"/currentpage");

这有点麻烦，但它可以工作并且不会重新加载页面。