New to Kendo UI for AngularStart a free 30-day trial

Masks

The MaskedTextBox supports a set of built-in masks and also enables you to set your own custom mask rules and implement static symbols (literals) in the mask pattern.

Mask Rules

The MaskedTextBox supports the following built-in mask rules:

  • 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.
  • If any of the built-in masks accepts spaces, set the promptPlaceholder to a character that is not allowed by the mask.
  • To escape a mask rule, use the slash (\) character. An escaped rule turns into a literal.

The MaskedTextBox also allows you to define custom mask rules by setting 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.

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

Change Theme
Theme
Loading ...

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

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...