Automaticaly converts Input Text to Uppercase using SfTextbox Component

[Handi]

Hi All,

I want to force user to input in Uppercase <SfTextbox>, any example ?

Thank you

Regards,

Handi Rusli

[Ponmani Murugaiyan]

Hi Handi, 

 

Greetings from Syncfusion support. 

 

We have validated your reported query. You can achieve your requirement by overriding the text-transform style of textbox to uppercase. Please find the code snippet and test sample below for reference. 

 

[Index.razor] 

 

@using Syncfusion.Blazor.Inputs 

 

<SfTextBox Value="Syncfusion" CssClass="conversion"></SfTextBox> 

 

<style> 

    .e-control-wrapper.conversion .e-textbox { 

        text-transform: uppercase; 

    } 

</style> 

 

 

Output: 

 

 

 

 

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1830400193  

 

Kindly check with the provided sample. If you need further assistances please get back us. We will assists you further. 

 

Regards, 

Ponmani M 

[Handi]

Dear Ponmani,

It works like a champ, thanks.

Regards,

Handi Rusli

[Ponmani Murugaiyan]

Hello Handi, 

  

Thanks for the update. 

  

Regards, 

Ponmani M 

[Ryan]

That example only changes what is displayed to uppercase. Is there any way to force the actual value to uppercase?

[Sureshkumar P]

Hi Ryan,

We cannot change the component actual value to upper case, but we can change the value to upper case by using the below code example.

Find the code example here:

@using Syncfusion.Blazor.Inputs

 

<span>two-way binding value @TextValue.ToUpper()</span>

 

<SfTextBox @bind-Value="@TextValue" CssClass="conversion"></SfTextBox>

 

@code {

    public string TextValue { get; set; } = "Syncfusion";

}

 

<style>

    .e-control-wrapper.conversion .e-textbox {

        text-transform: uppercase;

    }

</style>

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sureshkumar P

[Jan]

This is again not a solution. I would like to change the binded value of sftextbox so it is stored to DB capitalized.

[Priyanka Karthikeyan]

Hi Jan,

 

You can convert the bound value of the SfTextBox to uppercase by handling the @bind-Value attribute along with the Input event. This approach ensures that the entered text is automatically transformed to uppercase. Please refer to the following example:

 

<SfTextBox @bind-Value="TextValue" Input="OnInputHandler" Placeholder="Enter text"></SfTextBox>

<p>Uppercase Value: @TextValue</p>

@code {
    private string TextValue { get; set; }

    private void OnInputHandler(Syncfusion.Blazor.Inputs.InputEventArgs args)
    {
        TextValue = args?.Value?.ToString()?.ToUpper();
    }
}
 

 

Sample: https://blazorplayground.syncfusion.com/rthINLLXyNscHvdc

 

Regards,

Priyanka K