Blazor | ComponentOne
Controls / Input Controls / Masked Text Box / Prompts and Literals
In This Topic
    Prompts and Literals
    In This Topic

    With the MaskedTextBox control, you can provide instant, code-free formatting on user input and choose whether or not to show prompt characters and literals by setting one property, i.e., the Mask property. The prompt character indicates that text can be entered, using characters like # or _. Literals are non-mask characters that will appear as themselves within the mask, like / or -. The following sections describe how you can use prompts and literals with MaskedTextBox, in detail.

    Prompts

    The prompt character is the text that appears in the control to prompt the user to enter text. It indicates to the user that text can be entered, and can be used to detail the type of text allowed. You can choose to include prompt characters in the MaskedTextBox control by setting MaskFormat property of the C1MaskedTextBox class to MaskFormat.IncludePrompt. The MaskFormat property accepts the format of the mask value through the MaskFormat enumeration. This enumeration allows you to include only prompt characters, only literals, both prompts and literals, or exclude both prompts and literals.

    The following image shows the prompt character set in the MaskedTextBox control:

    This is how the output looks like after entering user input:

    To include a Prompt character in MaskedtextBox, use the following code:

    Index.razor
    Copy Code
    <label>Phone Number: PromptChar set to '#', MaskFormat set to "IncludePrompt"</label>
    <br />
    <C1MaskedTextBox @ref="mtxtbox" Mask="(999)-000-0000" PromptChar="'#'" 
         MaskFormat="MaskFormat.IncludePrompt" FinishedTextChange="FinishedTextChange"></C1MaskedTextBox>
    <br />
    <div>Value: <label>@(mtxtbox?.Value)</label> </div>
    
    @code {
        public C1MaskedTextBox mtxtbox;
    
        public void FinishedTextChange()
        {
            StateHasChanged();
        }
    }
    

    Literals

    In addition to the mask elements already defined, other characters can be included in the mask. These characters are literals. Literals are non-mask elements that will appear as themselves within the MaskedTextBox. Literals always occupy a static position in the mask at run time, and cannot be moved or deleted by the user. You can include literals in the MaskedTextBox control by setting MaskFormat property of the C1MaskedTextBox class to MaskFormat.IncludeLiterals.

    The following image shows the prompt character set in the MaskedTextBox control:

    This is how the output looks like after entering user input:

    To include a literals in MaskedtextBox, use the following code:

    For example, if the Mask property has been set to "(999)-000-0000" to define a phone number, the mask characters include the "9" and "0" elements. The remaining characters, the dashes and parentheses, are literals. These characters will appear as they are in the MaskedTextBox control.

    Index.razor
    Copy Code
            <label>Phone Number: PromptChar set to '#',  MaskFormat set to "IncludeLiterals"</label>
            <br />
            <C1MaskedTextBox @ref="mtxtbox" Mask="(999)-000-0000" PromptChar="'#'" MaskFormat="MaskFormat.IncludeLiterals"
            FinishedTextChange="FinishedTextChange"></C1MaskedTextBox>
            <br />
            <div>Value: <label>@(mtxtbox?.Value)</label> </div>
    
            @code {
            public C1MaskedTextBox mtxtbox;
    
            public void FinishedTextChange()
            {
            StateHasChanged();
            }
    }
    

    Furthermore, you can also choose to include or exclude both prompt characters and literals together by setting the MaskFormat property to MaskFormat.IncludePromptAndLiterals or MaskFormat.ExcludePromptAndLiterals respectively.

    The following image shows the prompt character set in the MaskedTextBox control:

    This is how the output looks like after entering user input:

    To include or exclude a Prompt character and literal in MaskedtextBox, use the following code:

    Index.razor
    Copy Code
    <label>Phone Number: PromptChar set to '#', MaskFormat set to "IncludePromptAndLiterals"</label>
    <br />
    <C1MaskedTextBox @ref="mtxtbox1" Mask="(999)-000-0000" PromptChar="'#'" MaskFormat="MaskFormat.IncludePromptAndLiterals" FinishedTextChange="FinishedTextChange"></C1MaskedTextBox>
    <div>Value: <label>@(mtxtbox1?.Value)</label> </div>
    <br />
    <label>Phone Number: PromptChar set to '#', MaskFormat set to "ExcludePromptAndLiterals"</label>
    <br />
    <C1MaskedTextBox @ref="mtxtbox2" Mask="(999)-000-0000" PromptChar="'#'" MaskFormat="MaskFormat.ExcludePromptAndLiterals" FinishedTextChange="FinishedTextChange"></C1MaskedTextBox>
    <br />
    <div>Value: <label>@(mtxtbox2?.Value)</label> </div>
    @code {
        public C1MaskedTextBox mtxtbox1, mtxtbox2;
        public void FinishedTextChange()
        {
            StateHasChanged();
        }
    }