在 Blazor 的开始屏幕上设置 InputText 焦点答案

【问题标题】：Setting InputText Focus on start screen in Blazor在 Blazor 的开始屏幕上设置 InputText 焦点
【发布时间】：2021-09-15 00:48:11
【问题描述】：

我正在使用 Visual Studio 2019 创建 Blazor PWA 应用程序。我使用 javascript 在启动和某些关键事件期间将焦点设置到 InputText 字段。

    function focusInput(id){
    document.getElementById(id).focus();

    var tb = document.querySelector("#" + id);
    if (tb.select) {
        tb.select();
    }
}

并像这样在我的代码中调用它

private string inputID = "user-id";
protected async override Task OnAfterRenderAsync(bool firstRender)
{
    await jsInterop.InvokeVoidAsync("focusInput", inputID);
}

这是剃须刀页面

<EditForm Model="@login" class="card card-body mt-2">
    <div class="form-group row">
        <label for="userid" class="col-sm-2 col-form-label">User ID</label>
        <InputText id="@inputID" class="form-control" @bind-Value="@login.UserID" @onkeyup="(KeyboardEventArgs e) => KeyUpUserIDAsync(e)"/>
    </div>
    <div class="form-group row">
        <label for="message" class="col-sm-2 col-form-label">Message</label>
        <InputTextArea id="textarea-message" class="form-control" @bind-Value="@errorMessage" />
    </div>
</EditForm>

它工作得很好，除非我运行它并加载第一页，即登录页面。焦点不是在字段中，而是留在 URL 栏中。如果我刷新页面 InputeText 获得焦点。请注意，我登录后导航到的所有其他页面都没有这个问题。只是初始页面。我写信给控制台以确保它被调用了。我也尝试过使用 autofocus 属性，但它也不起作用。

【问题讨论】：

是的，我也遇到过。估计是浏览器问题。您可能正在将焦点设置到元素，但是当页面完成加载时，浏览器会将焦点设置回 URL 栏。据推测，如果用户在 URL 栏中输入内容，Chrome（或其他）不希望您劫持用户的意图。顺便说一句，.net 5 有一个命令：docs.microsoft.com/en-us/dotnet/api/… 我不确定这是否会有所不同（我有点怀疑），但你可以试试。
您的疑问已得到证实。我有另一个选项，我在这里找到了 meziantou.net/auto-focus-an-input-in-a-blazor-form.htm，如果可行，我会发回一个示例。
我怀疑这种方法在大约 95% 的时间里都可以工作，并且出于同样的原因。

标签： c# blazor progressive-web-apps

【解决方案1】：

我可以按照此处提供的解决方案使您的代码正常工作：

How to set focus to InputText Element?

Index.razor

@page "/"
@inject IJSRuntime JSRuntime

<EditForm Model="@login" class="card card-body mt-2">
    <div class="form-group row">
        <label for="userid" class="col-sm-2 col-form-label">User ID</label>
        <InputText id="@inputID" class="form-control" @bind- 
             Value="@login.UserID" @onkeyup="(KeyboardEventArgs e) => 
             KeyUpUserIDAsync(e)" />
    </div>
    <div class="form-group row">
        <label for="message" class="col-sm-2 col-form- 
           label">Message</label>
        <InputTextArea id="textarea-message" class="form-control" @bind- 
           Value="@errorMessage" />
    </div>
</EditForm>

@code {
    public class LoginModel
    {
       public string UserID { get; set; }
    }

    public LoginModel login = new();
    public string inputID = "user-id";
    public string errorMessage = null;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("focusElement", inputID);
        }
    }

    async Task KeyUpUserIDAsync(KeyboardEventArgs e)
    {

    }
}

_Host.cshtml

<script>
    function focusElement(id) {
        const element = document.getElementById(id);
        element.focus();
    }
</script>

我多次运行该应用程序，每次加载登录输入时都会立即获得焦点，而无需我刷新页面。

【讨论】：