You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Blazor中如何获取TextEdit组件的粘贴内容?

Blazor中如何获取TextEdit组件的粘贴内容?

嗨,我来帮你搞定这个问题!你之前用普通的EventArgs肯定拿不到粘贴内容,因为它根本不包含剪贴板相关的数据,而且完全不用额外写JS函数就能解决,下面是具体的做法:

首先,你需要把OnScan方法的参数从EventArgs换成ClipboardEventArgs——这个类型是Blazor专门用来处理剪贴板事件的,里面包含了我们需要的剪贴板数据。

然后修改你的方法逻辑,从ClipboardEventArgs里提取粘贴的文本内容,再结合你原本的正则匹配和GUID判断逻辑就行。修改后的代码大概是这样:

// 先确保引入了Microsoft.AspNetCore.Components.Web命名空间,ClipboardEventArgs在这个命名空间里
void OnScan(ClipboardEventArgs e)
{
    // 从剪贴板获取粘贴的文本
    var pastedText = e.ClipboardData.GetData("text")?.ToString();
    
    if (!string.IsNullOrEmpty(pastedText))
    {
        foreach (string pattern in codePattern)
        {
            if (Regex.IsMatch(pastedText, pattern))
            {
                this.productCode = pastedText;
                this.packageID = "";
                break; // 匹配到就跳出循环,避免重复处理
            }
        }

        // 检查是否是GUID
        if (IsGuid(this.productCode))
        {
            this.packageID = this.productCode;
            this.productCode = "";
        }
    }
}

对应的组件部分不需要改动,还是原来的写法:

<Blazorise.Addon AddonType="Blazorise.AddonType.Start" Class="m-2 w-25">
    <Blazorise.AddonLabel>Package ID</Blazorise.AddonLabel>
    <Blazorise.TextEdit @bind-Text="packageID" @onpaste="OnScan" @onchange="OnPackageIDIputChange" />
</Blazorise.Addon>

这里要注意几个细节:

  • 一定要引入Microsoft.AspNetCore.Components.Web命名空间,不然找不到ClipboardEventArgs;
  • ClipboardData.GetData("text")是获取纯文本内容,如果你需要处理其他类型的数据可以调整参数,但这里你用的是TextEdit,纯文本就够了;
  • 记得判断pastedText是否为空,避免空引用异常。

这样修改后,你就能直接拿到用户粘贴的内容,完全不需要额外写JS函数,完美符合你的需求~

备注:内容来源于stack exchange,提问作者Roman Nichi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.23 09:49:51