Blazor表格输入框焦点控制问题：JSInterop设置焦点报错

问题根源分析 #

• 单个ElementReference仅最后一个输入框生效：循环渲染输入框时，若所有输入框绑定同一个ElementReference变量，最终变量只会指向循环的最后一个元素，自然只有它能触发逻辑。
• ElementReference数组报错：大概率是组件未完成渲染就调用JS方法，导致数组内的引用还未绑定到实际DOM元素；或者JS中处理数组的方式错误，比如直接遍历数组调用focus但引用为空。

最优实现思路（无需维护ElementReference集合） #

不用手动管理输入框的引用，直接通过JS监听全局滚轮事件，结合DOM焦点判断来处理，代码更简洁且不易出错：

1. Blazor组件代码（Razor）

<table>
    @foreach (var item in Items)
    {
        <tr>
            <td>
                <input type="number" 
                       class="numeric-input" 
                       @bind="@item.Value" 
                       step="1" />
            </td>
        </tr>
    }
</table>

@code {
    private List<MyItem> Items { get; set; } = new()
    {
        new MyItem { Value = 0 },
        new MyItem { Value = 0 },
        new MyItem { Value = 0 }
    };

    private class MyItem
    {
        public int Value { get; set; }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("setupNumericInputWheelHandler");
        }
    }
}

2. 全局JS代码（可放在wwwroot/js/site.js）

function setupNumericInputWheelHandler() {
    document.addEventListener('wheel', function(e) {
        // 仅处理带指定类的数字输入框且处于焦点状态
        const target = e.target;
        if (target.classList.contains('numeric-input') && target === document.activeElement) {
            e.preventDefault(); // 阻止页面滚动
            const step = parseFloat(target.step) || 1;
            // 根据滚轮方向修改值
            target.value = parseFloat(target.value) + (e.deltaY < 0 ? step : -step);
            // 触发input事件，让Blazor的双向绑定生效
            target.dispatchEvent(new Event('input'));
        }
    }, { passive: false }); // 必须设为false才能调用preventDefault
}

关键说明 #

• 无需维护ElementReference：通过类选择器和焦点判断，自动识别当前可操作的输入框，避免了循环中引用绑定的问题。
• 触发input事件：修改输入框值后手动触发该事件，确保Blazor的双向绑定能同步更新后端数据。
• 阻止默认行为：preventDefault避免滚轮修改值时页面跟着滚动，提升体验。

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