Get pasted content from SfTextBox

[Alessandro Spisso]

Hello,

I have a SfTextBox in a Blazor app. I need to get the pasted text, edit it and then show the processed text inside the SfTextBox.

I tried using the OnPaste event but it doesn't give me the pasted text, the args it passes are these

My code:

                <SfTextBox @bind-Value="@TextString" OnPaste="OnPasteTextString"/>

        private async Task OnPasteTextString(ClipboardEventArgs args)
        {
            //Get pasted content
            //Process it
            //Replace content inside the textbox
        }

How can I do this without having to access the clipboard content via JS?

Thank you!

​

[Kundurthi Naga Siddartha Kundurthi Vennela Prasad]

Hi Alessandro Spisso,

 

We can achieve your requirement by combining the OnPaste and Input events together in TextBox component. Here's how the solution works.

•  In the OnPaste event, we simply set a flag (_pasteHappened = true) to indicate that a paste action occurred.
• In the subsequent Input event, we check if the paste flag is set. Since the Input event carries the updated text value, we can capture the raw pasted string from args.Value.
• We then process this raw pasted text (for example, by sanitizing it with a regex to remove unwanted characters).
• Finally, we update the bound Value property with the sanitized version so that the textbox displays the processed text.

This way, you don’t need to access the clipboard directly via JavaScript. Instead, you leverage the Input event to retrieve the pasted content after the paste action, while the OnPaste event helps you detect when the paste occurred.

<SfTextBox @bind-Value="Value"

           Input="OnInput"

           OnPaste="OnPaste" />

@code {

    private string Value { get; set; } = "";

    private string _valueBeforePaste = "";

    private bool _pasteHappened;

 

    // New props to show both versions

    private string RawPastedValue { get; set; } = "";

    private string SanitizedPastedValue { get; set; } = "";

 

    private void OnPaste()

    {

        _pasteHappened = true;

        _valueBeforePaste = Value;

    }

 

    private void OnInput(Syncfusion.Blazor.Inputs.InputEventArgs args)

    {

        if (_pasteHappened)

        {

            _pasteHappened = false;

 

            RawPastedValue = args?.Value; // keep original pasted string

            SanitizedPastedValue = RemoveIllegalCharacters(args?.Value);

 

            // Update textbox value with sanitized version

            Value = SanitizedPastedValue;

        }

    }

 

    private string RemoveIllegalCharacters(string input)

    {

        if (string.IsNullOrEmpty(input))

            return input;

 

        // Allow only letters, digits, and spaces

        return System.Text.RegularExpressions.Regex.Replace(input, @"[^a-zA-Z0-9\s]", "");

    }

}

 

 In the sample provided, we also displayed both the raw pasted value and the sanitized value separately, so you can clearly see what was pasted and how it was processed before being shown in the textbox.

 

For your reference we have included a sample with gif demonstration below:
Gif:

Sample: https://blazorplayground.syncfusion.com/embed/BZBxjhtIoipazIMb?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5