Components / Inputs / MaskedTextBox

Masks

The MaskedTextBox supports a set of built-in masks.

Mask Rules

The supported mask rules are:

  • 0—Requires a digit (0-9).
  • 9—Requires a digit (0-9) or a space.
  • #—Requires a digit (0-9), space, plus (+), or minus (-) sign.
  • L—Requires a letter (a-Z).
  • ?—Requires a letter (a-Z) or a space.
  • A—Requires an alphanumeric (0-9, a-Z).
  • a—Requires an alphanumeric (0-9, a-Z) or a space.
  • &—Requires a character (excluding space).
  • C—Requires a character or a space.

You can also define custom rules by using the rules property.

Apart from the built-in and custom rules, you can also use static symbols in the mask pattern that are also known as literals. In the masked value, a literal is always rendered on the same position as the position where it is defined in the mask property.

  • To escape a mask rule, use the slash (\) character. An escaped rule turns into a literal.
  • If the mask accepts spaces, set the promptPlaceholder to a character that is not allowed by the mask.

The following example demonstrates how to use the digit-requiring mask (0) and the literal (-) of the MaskedTextBox.

@Component({
    selector: 'my-app',
    template: `
        <kendo-maskedtextbox
          [value]="value"
          [mask]="mask">
        </kendo-maskedtextbox>
    `
})

class AppComponent {
    public value: string = "5748-1570-0019-4334";
    public mask: string = "0000-0000-0000-0000";
}

The following example demonstrates how to extend the available mask rules.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <p>{{ mask }}</p>
            <ul>
                <li>Y - cyrillic only</li>
                <li>L - latin only</li>
            </ul>
        </div>
        <kendo-maskedtextbox
          [value]="value"
          [mask]="mask"
          [rules]="rules">
        </kendo-maskedtextbox>
    `
})

class AppComponent {
    public value: string = "абвг abcd";
    public mask: string = "YYYY LLLL";
    public rules: { [key: string]: RegExp } = {
        "L": /[a-zA-Z]/,
        "Y": /[\u0400-\u0481\u048A-\u04FF]/
    };
}

Masks on Input Values or Focus

By default, the MaskedTextBox always renders a mask. To display the mask only when the input contains a value or is focused, use the maskOnFocus option. maskOnFocus is particularly useful in combination with floating labels.

@Component({
    selector: 'my-app',
    template: `
        <form #form="ngForm">
            <div class="example-config">
                <pre>{{ value | json }}</pre>
            </div>
            <kendo-textbox-container floatingLabel="Phone">
                <kendo-maskedtextbox
                    name="masked"
                    [maskOnFocus]="true"
                    [mask]="mask"
                    [(ngModel)]="value"
                    >
                </kendo-maskedtextbox>
            </kendo-textbox-container>
        </form>
    `
})
class AppComponent {
    public value: string;
    public mask: string = "(999) 000-00-00-00";
}

In this article