MudBlazor 의 Mask 속성 이용한 입력 문자 제한하기

MudBlazor 의 Mask 속성 이용한 입력 문자 제한하기

 

이전 시간에 소문자를 대문자로 바꾸도록 처리를 했습니다.

2025.12.09 - [코딩/Blazor] - MudBlazor 의 MudTextField 소문자를 대문자로 변경하기

이번에는 Mask 속성을 활용하여 입력 문자 자체를 제한하면서 대문자로 변환하는 방법을 정리해봅니다.

마스킹(Masking)을 사용하면 카드번호·주민번호처럼 특정 규칙에 맞춘 입력을 강제할 수 있습니다.
이를 응용해 텍스트 입력 시 허용할 문자 종류를 제한하고 자동으로 대문자로 변환할 수도 있습니다.

<MudTextField Mask="@mask" @bind-Value="@testValue" Variant="Variant.Outlined" />

@code {
    private string testValue ="";

    // PatternMask 정의
    private PatternMask mask = new PatternMask("XXXXXXXXXXXXXXXXXXXX")
        {
            MaskChars = new[]
            {
            new MaskChar('X', @"[\uAC00-\uD7A3a-zA-Z0-9\s]")  // 한글과 영문자와 숫자 허용
        },
            
            CleanDelimiters = true,
            Transformation = AllUpperCase  // 변환 함수 지정
        };

    // 소문자를 대문자로 변환하는 함수
    private static char AllUpperCase(char c) => c.ToString().ToUpperInvariant()[0];
}

결과

• 입력 가능한 문자가 한글 / 영문 / 숫자로 제한
• 입력한 영문이 자동으로 대문자로 변환

 

제약은 PattrnMask 에 정의된 길이만큼 길이 제한이 생기게됩니다.

단순히 대소문자 변환에는 적합하지 않은것 같습니다 버그도 좀 있는듯합니다.^^;

 

참고

https://mudblazor.com/features/masking#defining-mask-characters

MudBlazor - Blazor Component Library