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.
$(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.
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.
$(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.
$(function() { $("#textBoxContainer").dxTextBox({ mask: "+1 (200) 000-0000", maskInvalidMessage: "The input value does not match the mask" }); });
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.