Blazor | ComponentOne
Controls / Input Controls / Masked Text Box / Tab and Display Behavior
In This Topic
    Tab and Display Behavior
    In This Topic

    MaskedTextBox allows you to control its display modes and tab behavior. It lets you handle the visibility of the masks in the MaskedtextBox control and the behavior of tab key. Let us dive into the details of how you can change the display modes of the control and control its tab behavior.

    Display Mode

    You can easily set different display modes for a mask using DisplayMode property of the C1MaskedTextBox class. The DispalyMode property accepts the display mode value from the MaskDisplayModes enumeration which allows you to choose either of the following options to display mask:

    The following code demonstrates the how you can set different display modes for a mask:

    Index.razor
    Copy Code
    <C1MaskedTextBox Mask="(999) 00000 - 0000" DisplayMode="displayMode">
    </C1MaskedTextBox>
    
    <C1ComboBox ItemsSource="MaskDisplayModes" T="MaskDisplayMode" 
        @bind-SelectedItem="displayMode" Placeholder="Display Mode"
        SelectedIndexChanged="StateHasChanged" >
    </C1ComboBox>
    
    @code {
        public MaskDisplayMode displayMode { get; set; }
    
        public static readonly IList<MaskDisplayMode> MaskDisplayModes = new List<MaskDisplayMode>
        {
            MaskDisplayMode.FocusIn, MaskDisplayMode.Always
        };
    }
    

    Tab Behavior

    In addition to the display mode, MaskedTextBox also allows you to define the tab behavior using TabBehavior property of the C1MaskedTextBox class. The TabBehavior property accepts values from the TabBehavior enumeration which allows you to choose either of the following options to set the behavior of the Tab key:

    The following code demonstrates how you can set the Tab behavior through code using the TabBehavior property:

    Index.razor
    Copy Code
    <C1MaskedTextBox Mask="(999) 00000 - 0000" TabBehavior="TabBehavior.MoveToNextNearestSegment">
    </C1MaskedTextBox>