Blazor：提交表单后无法为InputText设置焦点问题

你遇到的焦点设置不生效，核心原因是Blazor的DOM渲染是异步调度的：在try块中执行myModel = new myDTO();会触发组件状态变更，组件会重新渲染DOM，但这个渲染操作不会立即完成。而finally块里的JS焦点调用是同步执行的，此时目标InputText可能还没完成重新渲染，导致找不到元素或者元素未就绪，focus操作失效。

下面是几种可行的解决方法：

方法一：使用Blazor内置的ElementReference（推荐） #

这种方式不需要自定义JS，直接通过组件引用操作，更可靠：

1. 在Razor页面中给InputText添加@ref引用：

<InputText @ref="_nCodeInput" @bind-Value="myModel.NCode" id="NCode" />

2. 在组件类中定义对应的ElementReference字段：

private ElementReference _nCodeInput;

3. 修改finally块的代码，直接调用内置的FocusAsync方法：

finally
{
    _busy_submit_btn = false;
    // 等待组件渲染完成后聚焦
    await _nCodeInput.FocusAsync();
}

方法二：延迟JS焦点操作 #

如果坚持使用自定义JS函数，可以修改JS代码，通过setTimeout将focus操作延迟到DOM更新完成后执行：

function focusElementById(id) {
    // 延迟到事件队列末尾，确保DOM已更新
    setTimeout(() => {
        const element = document.getElementById(id);
        if (element) {
            element.focus();
        }
    }, 0);
}

方法三：等待组件状态变更完成后再执行焦点操作 #

在finally块中先触发状态变更通知，等待组件渲染完成后再调用JS：

finally
{
    _busy_submit_btn = false;
    // 通知Blazor更新组件状态
    await InvokeAsync(StateHasChanged);
    // 短暂等待确保DOM渲染完成
    await Task.Delay(1);
    await JsRuntime.InvokeVoidAsync("focusElementById", "NCode");
}

其中方法一是Blazor官方推荐的方式，避免了DOM选择器的不确定性，也不需要额外的JS代码，稳定性最高。

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