Blazor使用JS模块隔离时如何将@onkeydown事件参数传递给JS调用preventDefault

问题根因 #

当前写法无法调用preventDefault的核心原因是：Blazor 事件回调拿到的KeyboardEventArgs是框架封装的序列化数据对象，传递到 JS 侧后只是普通 JSON 对象，并非原生 DOM 事件实例，本身没有preventDefault这类原生事件方法。

解决方案 #

方案1：JS 返回判断结果，C# 侧执行阻止逻辑（最推荐） #

该方案改动最小，不需要修改核心校验逻辑，仅调整返回值即可：

1. 先将你的Script.js调整为符合 ES 模块规范的导出写法：

export function NumericKeyDown(eventArgs) {
    if (eventArgs.defaultPrevented) {
        return false;
    }
    if (eventArgs.metaKey || eventArgs.altKey || eventArgs.ctrlKey) {
        return false;
    }
    if (/^[\d]$/.test(eventArgs.key)) {
        return false;
    }
    // 符合阻止条件则返回true
    return true;
}

2. 调整Main.razor代码，接收JS返回结果后通过Blazor内置属性阻止默认行为，同时把async void回调改为async Task避免未捕获异常：

<input id="numInput" @onkeydown="@OnKeyDown" />

@inject IJSRuntime JSRuntime
@code {
    private Task<IJSObjectReference> m_Module;
    private Task<IJSObjectReference> Module => m_Module ??= JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/Script.js").AsTask();

    private async Task OnKeyDown(KeyboardEventArgs args)
    {
        var module = await Module;
        bool shouldPreventDefault = await module.InvokeAsync<bool>("NumericKeyDown", args);
        args.PreventDefault = shouldPreventDefault;
    }
}

方案2：JS 侧直接绑定原生事件 #

如果你确实需要在JS侧操作原生DOM事件，可以在组件渲染完成后调用JS绑定事件，不需要走Blazor的事件回调：

1. 调整Script.js代码，新增绑定/解绑方法：

function NumericKeyDown(event) {
    if (event.defaultPrevented) {
        return;
    }
    if (event.metaKey || event.altKey || event.ctrlKey) {
        return;
    }
    if (/^[\d]$/.test(event.key)) {
        return;
    }
    event.preventDefault();
}

export function bindKeydownEvent(elementId) {
    const inputEl = document.getElementById(elementId);
    inputEl?.addEventListener('keydown', NumericKeyDown);
}

export function unbindKeydownEvent(elementId) {
    const inputEl = document.getElementById(elementId);
    inputEl?.removeEventListener('keydown', NumericKeyDown);
}

2. 调整Main.razor代码，在组件生命周期中调用绑定/解绑逻辑：

<input id="numInput" />

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable
@code {
    private Task<IJSObjectReference> m_Module;
    private Task<IJSObjectReference> Module => m_Module ??= JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/Script.js").AsTask();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var module = await Module;
            await module.InvokeVoidAsync("bindKeydownEvent", "numInput");
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (m_Module.IsCompletedSuccessfully)
        {
            var module = await m_Module;
            await module.InvokeVoidAsync("unbindKeydownEvent", "numInput");
            await module.DisposeAsync();
        }
    }
}

注意事项 #

Blazor 事件回调不要使用async void写法，异常不会被全局捕获，容易导致程序崩溃，统一换成async Task即可。

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