MudBlazor 의 MudTextField 소문자를 대문자로 변경하기

MudBlazor 의 MudTextField 소문자를 대문자로 변경하기

Blazor SSR 환경에서 MudTextField 의 입력값중 소문자를 대문자로 변경하는 방법입니다.

SSR 환경이기 때문에 TextUpdateSuppression 값을 "false" 로 설정해야 합니다.

<MudTextField @bind-Value="test" TextUpdateSuppression="false"
              @bind-Value:after="() => { test = test.ToUpper(); StateHasChanged(); }" 
              Immediate="true" Variant="Variant.Outlined" />
              
@code {
    private string test = "";
}

결과

위 동작을 보면 알수 있듯이 붙여넣기동작도 정상 동작합니다.

 

아래는 다른 방법들입니다.

 

다른 방법1 - ValueChanged 이벤트 사용

<MudTextField Value="@test" T="string"
              ValueChanged="@OnValueChanged"
              Immediate="true" TextUpdateSuppression="false"
              Variant="Variant.Outlined" />


@code {
    private string test = "";

    private Task OnValueChanged(string val)
    {
        test = val.ToUpper();
        return InvokeAsync(StateHasChanged);
    }
}

 

다른 방법2 - 프로퍼티 Setter 사용

<MudTextField @bind-Value="otherTest" T="string" 
	Immediate="true" Variant="Variant.Outlined" 
    TextUpdateSuppression="false" />

@code {
    private string _otherTest = "";
    private string otherTest
    {
        get => _otherTest;
        set
        {
            if (_otherTest != value)
            {
                _otherTest = value.ToUpperInvariant();
                InvokeAsync(StateHasChanged);
            }
        }
    }
}

 

 

참고

https://github.com/MudBlazor/MudBlazor/issues/11592

MudTextField: Not Updating Value in Blazor Server · Issue #11592 · MudBlazor/MudBlazor