All Components

Mask Rules

The MaskedTextBox provides predefines mask rules.

The available predefined mask rules are:

  • 0—Digit. Accepts any digit between 0 and 9.
  • 9—Digit or space. Accepts any digit between 0 and 9 or space.
  • #—Digit or space. Identical to 9. In addition, allows the + (plus) and - (minus) signs.
  • L—Letter. Restricts the input to a-z and A-Z letters. This rule is equivalent to [a-zA-Z] in regular expressions.
  • ?—Letter or space. Restricts the input to letters a-z and A-Z. This rule is equivalent to [a-zA-Z]|\s in regular expressions.
  • &—Character. Accepts any character except a space. The rule is equivalent to \S in regular expressions.
  • C—Character or space. Accepts any character. The rule is equivalent to . in regular expressions.
  • A—Alphanumeric. Accepts letters and digits only.
  • a—Alphanumeric or space. Accepts only letters, digits, and space.

To escape any of the masks, use the \ character. The escaped rules transform to literals.

The following example demonstrates how to specify a phone number mask.

<div id="vueapp" class="vue-app">
    <kendo-maskedtextbox title="phone number" mask="(###) 000-0000">
    </kendo-maskedtextbox>
</div>
Vue.use(InputsInstaller);

new Vue({
    el: "#vueapp"
})

Known Limitations

  • To restrict the typed value on mobile devices, the MaskedTextBox listens to input events such as keydown and keypress.
  • On some mobile browsers, mostly Android or the Windows Mobile OS built-in browsers, such input events do not fire at all. This behavior prevents the normal functioning of the MaskedTextBox because they are fundamental for the typing restriction. Recent tests show that the MaskedTextBox works in the latest iOS version.
In this article