Convert text to always be uppercase in Blazor

Question

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())" />

Answer 1

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())" />

Answer 2

Simplicity works for me.

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

Answer 3

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.

Answer 4

I'm using MudBlazor. I scratched my head for a while why the heck adding

Style="text-transform: uppercase;"

to <MudInput> is not working, even with !important attribute the default user agent style (text-transform: none;) was applied. C# or JS seemed overkill for the task in my opinion. What finally worked for me was adding

 input {
    text-transform: uppercase;
}

to the site's CSS sheet (index.css in my case). This eventually overwritten the default user agent style.

Answer 5

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.