Blazor中@onpaste事件结合TypeScript获取粘贴内容报错求助

错误核心是调用JS方法时未传递ClipboardEvent事件对象，导致TypeScript函数里的e参数为undefined，无法读取clipboardData属性；同时Razor代码中注入的IJSRuntime变量存在大小写不一致的问题（_Js和_js）。

1. 修正Razor代码 #

• 修复IJSRuntime变量的大小写错误
• 在@onpaste事件中传递原生ClipboardEvent对象给JS方法
• 通过ClipboardEventArgs获取原生事件并传入JS调用

@inject IJSRuntime _js

<input class="otp-input"
       @ref="myInputRef"
       @onpaste="HandleOnPaste" />
@code {
    private ElementReference myInputRef { get; set; }

    private async Task HandleOnPaste(ClipboardEventArgs e)
    {
        // 传递原生ClipboardEvent给JS方法
        var pastedData = await _js.InvokeAsync<string?>("OtpInput.getPastedData", e.NativeEvent);
        
        // 处理粘贴的数据
        if (!string.IsNullOrEmpty(pastedData))
        {
            // 执行你的业务逻辑
        }
    }
}

2. 调整TypeScript代码 #

核心逻辑无需修改，但需将类挂载到window对象，确保Blazor能访问到；同时用可选链优化空值判断：

class OtpInput {
    static getPastedData(e: ClipboardEvent) {
        // 用可选链和空值合并避免潜在报错
        let pastedData = e.clipboardData?.getData('text') ?? '';
        return pastedData;
    }
}

// 将类挂载到window，让Blazor可以调用
(window as any).OtpInput = OtpInput;

3. 额外优化（可选） #

如果不需要浏览器默认的粘贴行为，可添加@onpaste:preventDefault阻止默认动作：

<input class="otp-input"
       @ref="myInputRef"
       @onpaste="HandleOnPaste"
       @onpaste:preventDefault />

同时确保TypeScript编译后的JS文件已正确引入到项目的index.html（WebAssembly项目）或_Layout.cshtml（Server项目）中。

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