The InputMask control allows you to validate and format user input as it is entered. The control prevents users from accidentally entering invalid data and saves time by skipping over literals (such as slashes in dates) as the user types.
The mask used to validate the input is defined by the mask property, which may contain one or more of the following special characters:
Character | Mask Type |
---|---|
0 | Digit. |
9 | Digit or space. |
# | Digit, sign, or space. |
L | Letter |
l | Letter or space. |
A | Alphanumeric. |
a | Alphanumeric or space. |
. | Localized decimal point. |
, | Localized thousand separator. |
: | Localized time separator. |
/ | Localized date separator. |
$ | Localized currency symbol. |
< | Converts characters that follow to lowercase. |
> | Converts characters that follow to uppercase. |
\ | Escapes any character, turning it into a literal. |
9 | DBCS Digit. |
J | DBCS Hiragana. |
G | DBCS big Hiragana. |
K | DBCS Katakana. |
N | DBCS big Katakana. |
K | SBCS Katakana. |
N | SBCS big Katakana. |
Z | Any DBCS character. |
H | Any SBCS character. |
All others | Literals. |
The main properties of the control include:
<input id="thePhone"><br>
import * as input from '@grapecity/wijmo.input';
function init() {
let thePhone = new input.InputMask('#thePhone', {
mask: '(999) 000-0000'
});
}
Submit and view feedback for