Input mask widget

Usually the default question single input can have several input types in SurveyJs Creator. They are all string compatible types which may vary from color to week. However, with our input mask widget integrated in the SurveyJs Creator, you can control the input of type text via different input masks. We offer four different input masks for input of the type text: Currency, Decimal, Integer and Ip.

A question with an input mask type integer is mapped to a parameter of type INTEGER and the input mask type currency is mapped to FLOAT. Accordingly the resulting parameter for the input mask type decimal is of the type FLOAT and for the input mask type ip is of the type STRING as shown in the next template.

In addition, the minimum and maximum values ​​can be entered for the integer and decimal masks. The entries at runtime must then lie in the predefined range of values, for example between 0 and 10.

Optionally a currency symbol can be defined as prefix or suffix for currency values. At runtime while typing the user can see the proper radix and group delimiters or the prefix and suffix according to their locale, ie. like 1.111,00€. These input masks ensure that entries are only accepted in a specific and predefined format.

Currency in the SurveyJs Creator

Currency at runtime

Ip with default pattern

Patterns for the input mask widget

Our input mask widget offers the possibility to define the pattern for the user input yourself, if none of the predefined input mask types suits you. For example, a pattern for the phone number can be entered as follows.

Pattern for phone number

Your own patterns are declared under the None input mask type and need some additional information. It must be specified in SurveyJs Creator whether the pattern is a regular expression and whether Auto Unmask should be used. If the pattern is a regex, the input is treated according to the entered regex. Setting the Auto unmask provides the entered value in plain form removing static characters stemming from the mask (pattern or regular expression). For instance, it removes blanks and extra characters and only provides the entered numbers and characters in a plain format, ie. unmasking the value for the pattern 99-99-99 will result in a string containing 6 digits without hyphens.

Entering a value for pattern at runtime

An input mask for a regular expression for multiple input of digits between 0 and 8 can be created as follows.

Example for regex

Finally, at runtime a tooltip will be added for pattern/regular expression if no tooltip is present.

Tooltip at runtime

Pattern/Regex in multiple text question

Multiple text with pattern/regex at runtime

For multiple text questions, a pattern or regular expression can be entered in each text field. These must be defined under multiple text question items.

Pattern and regex in multiple text

The pattern or regular expression is declared in the same way as for individual text fields.

Example for pattern in multiple text