CODEWITHSUNDEEP
c#.net-coreblazor
Dan
Dan

Reputation: 796

Convert text to always be uppercase in Blazor

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

Upvotes: 5

Views: 7430

Answers (5)

goodfellow
goodfellow

Reputation: 3725

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.

Upvotes: 1

Dragos
Dragos

Reputation: 181

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.

Upvotes: 2

Dan
Dan

Reputation: 796

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

Upvotes: 0

Mister Magoo
Mister Magoo

Reputation: 8964

Simplicity works for me.

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

Upvotes: 5

gunr2171
gunr2171

Reputation: 17520

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.

Upvotes: 0

Related Questions