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.
- $(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.
- 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.
- $(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.
- $(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.