JavaScript/jQuery TextBox - Specify a Mask for the Input

A mask defines a pattern for the TextBox value. You can specify the mask using the mask property. A mask can contain the following elements.

Masking Element Description
0 A digit.
9 A digit or a space.
# A digit, a space, "+" or "-" sign.
L A literal.
C Any character except space.
c Any character.
A An alphanumeric.
a An alphanumeric or a space.

You can also define custom masking elements using the maskRules object. Each field of this object defines a single masking element.

JavaScript
  • $(function() {
  • $("#textBoxContainer").dxTextBox({
  • mask: "SFFFFHN",
  • maskRules: {
  • // a single character
  • S: '$',
  •  
  • // a regular expression
  • H: /[0-9A-F]/,
  •  
  • // an array of characters
  • N: ['$', '%', '&', '@'],
  •  
  • // a function
  • F: function (char) {
  • return char == char.toUpperCase();
  • }
  • }
  • });
  • });

The masked value goes to the read-only text property, while its unmasked equivalent goes to the value property.

You can get the value of either of these properties using the option(optionName) method.

JavaScript
  • const maskedValue = $("#textBoxContainer").dxTextBox("option", "text");
  • const unmaskedValue = $("#textBoxContainer").dxTextBox("option", "value");

By default, the UI component uses underscores to designate blanks in the masked value. You can specify another symbol using the maskChar property.

JavaScript
  • $(function() {
  • $("#textBoxContainer").dxTextBox({
  • mask: "+1 (200) 000-0000",
  • maskChar: "‒"
  • });
  • });

If the input value does not match the mask, the TextBox displays an error message specified by the maskInvalidMessage property.

JavaScript
  • $(function() {
  • $("#textBoxContainer").dxTextBox({
  • mask: "+1 (200) 000-0000",
  • maskInvalidMessage: "The input value does not match the mask"
  • });
  • });
See Also