Convert text to always be uppercase in Blazor

user_8062149 0
Viewed 2787

I am trying to make my input text always be uppercase in a blazor input text field. I tried creating a custom InputText like the below but it doesn't update the binding (appears as uppercase but doesn't bind as such). What am I doing wrong here? Is there a better way?

@inherits InputText

<input @attributes="AdditionalAttributes"
       class="@CssClass"
       value="@CurrentValue"
       @oninput="EventCallback.Factory.CreateBinder<string>(
        this, __value => CurrentValueAsString = __value.ToUpper(), CurrentValueAsString.ToUpper())" />
blazor .net-core c#
4 Answers

Simplicity works for me.

<input type="text" oninput="this.value=this.value.toUpperCase()" @bind=CurrentValueAsString />
user_26586970

I was using an old reference to the input which was causing the error. There was a bug in the code though (if the input was null). The corrected version can be seen here:


@inherits InputText

<input @attributes="AdditionalAttributes"
       class="@CssClass"
       value="@CurrentValue"
       @oninput="EventCallback.Factory.CreateBinder<string>(
        this, __value => CurrentValueAsString = __value?.ToUpper(), CurrentValueAsString?.ToUpper())" />
user_80621490

For simplicity and (in my opinion) UX reasons, let's assume that the user is allowed to type lowercase letters, but the application will ToUpper the input after they leave that field.

First, make a new component so we can reuse the logic. I called mine UppercaseTextInput.razor

<input value="@UserInput" 
       @onchange="async e => await OnChange(e)" />

@code {
    [Parameter]
    public string UserInput { get; set; }

    [Parameter]
    public EventCallback<string> UserInputChanged { get; set; }

    private async Task OnChange(ChangeEventArgs e)
    {
        var upperCase = (e.Value as string).ToUpperInvariant();
        await UserInputChanged.InvokeAsync(upperCase);
    }
}

The private method OnChange gets called whenever the input loses focus. Change @onchange to @oninput to make this happen every keystroke.

Now you can use this component in another page or component. For example, in the index page:

@page "/"

<h1>Hello, world!</h1>

<UppercaseTextInput @bind-UserInput="UserInput" />
<p>You typed: @UserInput</p>

@code {
    public string UserInput { get; set; } = "Initial";
}

In this example, I have "Initial" as the starting text, which will be printed inside the text box. As soon as you leave the element, the text inside will be transformed to be uppercase.

The benefit of using a component is that you can do a standard @bind- with your properties.

user_10433800

The answer to this was easier than all the answers: it can be solved using CSS text-transform: uppercase;. This is all you needed and it doesn't take any processing power because it's included in the browser's engine.

user_19839590
Related