Blazor PWA首屏登录页InputText设置焦点失效问题咨询

问题根因 #

Blazor PWA首屏首次加载时，浏览器默认会将焦点锁定在地址栏，此时你在OnAfterRenderAsync中触发的JS聚焦调用和原生autofocus属性，都会被浏览器的默认优先级逻辑拦截，只有页面完成首次加载刷新后，浏览器不再抢占焦点，聚焦逻辑才能正常生效。

方案1：修改C#调用逻辑，增加微小延时适配首屏场景 #

不需要改现有JS代码，只需要调整后置代码的调用时机，首屏渲染时加100ms以内的延时避开浏览器焦点抢占周期即可：

private string inputID = "user-id";
[Inject] private IJSRuntime jsInterop { get; set; }

protected async override Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 首屏首次渲染加微小延时，避开浏览器地址栏抢焦点的周期，延时用户无感知
        await Task.Delay(80);
    }
    await jsInterop.InvokeVoidAsync("focusInput", inputID);
}

该方案改造成本最低，可覆盖绝大多数场景。

方案2：使用Blazor原生聚焦API（推荐，无需额外JS） #

.NET 5及以上版本中，Blazor表单组件原生支持FocusAsync方法，不需要自定义JS实现，稳定性更高：
首先修改Razor页面，给InputText增加引用标记：

<InputText @ref="userInputRef" id="@inputID" class="form-control" @bind-Value="@login.UserID" @onkeyup="(KeyboardEventArgs e) => KeyUpUserIDAsync(e)"/>

再调整后置代码逻辑：

private InputText userInputRef;
private string inputID = "user-id";

protected async override Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await Task.Delay(80);
        await userInputRef.FocusAsync();
    }
}

方案3：修改JS逻辑增加容错和延时 #

如果需要保留现有JS实现复用，可直接调整JS代码：

function focusInput(id){
    setTimeout(() => {
        const tb = document.getElementById(id);
        if(!tb) return;
        tb.focus();
        if (typeof tb.select === 'function') {
            tb.select();
        }
    }, 80);
}

该方案不需要修改C#侧代码，适合多场景复用聚焦逻辑的需求。

内容的提问来源于stack exchange，提问作者Mr Rob