Blazor Server端按钮autofocus未生效问题排查求助

核心问题分析 #

1. 原生autofocus属性的局限性：HTML的autofocus仅在元素首次插入DOM时触发焦点，后续即使通过Blazor绑定更新该属性值，浏览器也不会重新为元素设置焦点。你绑定autofocus="@focus_sub1"的方式，只能在组件第一次渲染时生效，导航返回时元素已存在于DOM中，属性变化无法触发焦点。
2. 生命周期方法时机不对：OnInitialized仅在组件首次初始化时执行一次。如果主页组件在导航返回时被复用（Blazor路由默认会复用组件实例），或者selected_page是在组件初始化后才赋值的，OnInitialized里的逻辑不会重新执行，导致focus_subX变量无法根据最新的selected_page更新。
3. :focus伪类的依赖问题：你的高亮样式依赖浏览器的焦点状态，而焦点是临时状态，页面导航、组件重新渲染时很容易丢失，除非主动触发焦点设置。

具体解决方案 #

方案1：用CSS类替代焦点控制高亮（最推荐） #

不需要依赖浏览器焦点，直接通过selected_page的值绑定CSS类，视觉效果更稳定：

1. 修改Razor按钮代码，绑定动态类：

<button class="icon-button @(selected_page == "sub1" ? "active" : "")" @onclick="Function_sub1">sub1</button>
<button class="icon-button @(selected_page == "sub2" ? "active" : "")" @onclick="Function_sub2">sub2</button>
<button class="icon-button @(selected_page == "sub3" ? "active" : "")" @onclick="Function_sub3">sub3</button>

2. 更新CSS样式：

/* 普通按钮样式 */
.icon-button{        
    color: black;       
}   

/* 选中状态高亮（兼容原focus样式） */
.icon-button.active,
.icon-button:focus {
    color: blue;
    font-weight: bold;
}

这种方式不需要处理DOM焦点，只要selected_page值正确，样式就会自动生效，完全适配导航返回的场景。

方案2：通过JS Interop主动设置焦点（需真实焦点场景） #

如果需要按钮真正获得焦点（比如支持键盘导航），可以借助Blazor的JS Interop主动操作DOM：

1. 给按钮添加唯一ID：

<button class="icon-button" id="btn-sub1" @onclick="Function_sub1">sub1</button>
<button class="icon-button" id="btn-sub2" @onclick="Function_sub2">sub2</button>
<button class="icon-button" id="btn-sub3" @onclick="Function_sub3">sub3</button>

2. 注入IJSRuntime并添加焦点设置逻辑：

@inject IJSRuntime JSRuntime

// ...

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    // 每次组件渲染后（包括导航返回），根据selected_page设置对应按钮焦点
    switch (selected_page)
    {
        case "sub1":
            await JSRuntime.InvokeVoidAsync("focusElement", "btn-sub1");
            break;
        case "sub2":
            await JSRuntime.InvokeVoidAsync("focusElement", "btn-sub2");
            break;
        case "sub3":
            await JSRuntime.InvokeVoidAsync("focusElement", "btn-sub3");
            break;
    }

    await base.OnAfterRenderAsync(firstRender);
}

3. 在_Host.cshtml中添加全局JS函数：

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

方案3：修正生命周期方法（配合方案2使用） #

如果坚持要用autofocus绑定，需要把焦点变量的更新逻辑移到OnParametersSet（组件每次参数变化、导航返回时都会执行）：

protected override void OnParametersSet()
{
    switch (selected_page)
    {
        case "sub1":
            focus_sub1 = true;
            focus_sub2 = false;
            focus_sub3 = false;
            break;
        case "sub2":
            focus_sub1 = false;
            focus_sub2 = true;
            focus_sub3 = false;
            break;
        case "sub3":
            focus_sub1 = false;
            focus_sub2 = false;
            focus_sub3 = true;
            break;
        default:
            focus_sub1 = focus_sub2 = focus_sub3 = false;
            break;
    }

    base.OnParametersSet();
}

注意：此方案仅更新autofocus属性值，无法直接触发焦点，必须配合方案2的JS Interop才能让按钮真正获得焦点。

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