在blazor和typescript中打开输入事件

Question

@onpaste是在输入中粘贴内容时执行的blazor DOM事件。现在，我想从typescript中获取这些文本内容(blazor不支持它(。

剃须刀：

@inject IJSRuntime _Js
<input class="otp-input"
@ref="myInputRef"
@onpaste="HandleOnPaste" />
@code {
private ElementReference myInputRef { get; set; }
private async Task HandleOnPaste()
{
var pastedData = await _js.InvokeAsync<string?>("OtpInput.getPastedData")

// DO Something
}

}

ts:

class OtpInput {
static getPastedData(e: ClipboardEvent) {
let pastedData = e.clipboardData!.getData('text');
return pastedData;
}
}

这不起作用，并返回错误：TypeError: Cannot read properties of undefined (reading 'clipboardData')

Answer 1

编辑：

Blazor现在支持注册自定义事件参数。文档中有一个使用自定义事件参数创建自定义剪贴板粘贴事件的示例，该事件包括粘贴时间和用户粘贴的文本。

原始答案：

你可以使用不同的方法。使用javascript将事件监听器添加到输入元素，然后调用dotnet方法并传递事件数据。我使用javascript，但您可以对typescript进行相应的修改。

pasteInteropHelper.js:

export function addOnPasteEventListener(elem, componentInstance) {
elem.onpaste = (e) => {
var text = e.clipboardData.getData('text');
componentInstance.invokeMethod('HandlePaste', text);
}
}

剃须刀组件：

@inject IJSRuntime JS
<input @ref="_inputRef" />
@code {
private ElementReference _inputRef;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var module = await JS.InvokeAsync<IJSObjectReference>(
"import", "./pasteInteropHelper.js");
var selfReference = DotNetObjectReference.Create(this);

await module.InvokeVoidAsync("addOnPasteEventListener", _inputRef, selfReference);
}
}
[JSInvokable]
public void HandlePaste(string text)
{
Console.WriteLine(text);
}
}