DevExtreme React - Specify a Mask for the Input

A mask defines a pattern for the TextBox value. You can specify the mask using the mask option. 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 option, while its unmasked equivalent goes to the value option. You can get the value of either of these options using the option(optionName) method.

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

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

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 option.

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