Edit this page

MaskedTextBox Overview

The Kendo UI MaskedTextBox widget allows controlled text input based on a specific format. This specific format can be defined using the mask option of the widget. Each mask can contain mask rules and mask literals. The mask literals will be automatically entered for the user and they cannot be removed. The widget also has predefined rules which specify:

  • required/optional digit input
  • required/optional letter input
  • required/optional character input (allow any character)

For a complete overview of the methods and configuration options MaskedTextBox applies, review its API Reference.

Getting Started

Initialize the MaskedTextBox

<input id="maskedtextbox" />
<script>
    $(document).ready(function(){
        $("#maskedtextbox").kendoMaskedTextBox({
            mask: "000000"
        });
    });
</script>

When a MaskedTextBox is initialized, it will decorate the <input> element with a k-textbox CSS class.

Important
The default mask is an empty string, which allows any input. If you need to restrict user input, define a mask value.

Configuration

MaskedTextBox provides configuration options that can be easily set during initialization. Some of the properties that can be controlled are:

  • Value of the widget
  • Mask value
  • Custom mask rules
  • Prompt char
  • Culture name

For a complete overview of the methods and configuration options MaskedTextBox applies, review its API Reference.

Mask Rules

The following mask rules are available and predefined:

  • 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. Like 9 rule, but allows also the + (plus) and - (minus) signs.
  • L - Letter. Restricts input to letters a-z and A-Z. This rule is equivalent to [a-zA-Z] in regular expressions.
  • ? - Letter or space. Restricts input to letters a-z and A-Z. This rule is equivalent to [a-zA-Z] in regular expressions.
  • & - Character. Accepts any character except 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 letters, digits and space only.

Important
Any mask rule can be escaped using the \ character. An escaped rule is turned into a literal.

Mask Literals

The following mask literals are globalized based on the current culture:

  • . - Decimal placeholder. The decimal separator will be set according to the current culture used by Kendo UI.
  • , - Thousands placeholder. The display character will be set according to current culture used by Kendo UI.
  • $ - Currency symbol. The display character will be set according to current culture used by Kendo UI.

Importnat
Any of the aforementioned literals can be escaped using the \ character.

Customize Mask Rules

The MaskedTextBox widget provides the option to define custom mask rules during initialization. To customize a mask rule, define it in the rules option. The widget supports rules defined as regular expression or a function.

Example
<input id="maskedtextbox">

<script>
  $(document).ready(function(){
    $("#maskedtextbox").kendoMaskedTextBox({
      mask: "~^",
      rules: {
        "~": /[+-]/,
        "^": function (char) {
          return char === "^"; //allow ony "^" symbol
        }
      }
    });
  });
</script>

Important
Any of the predefined rules can be overridden through the rules option.

See Also

Other articles on Kendo UI MaskedTextBox and how-to examples:

Copyright © 2002-2015 Telerik Inc. All rights reserved.