Imask Field

A text input with an input mask — phone numbers, card numbers, amounts. The mask comes from the IMask library.

Settings: one box holding the IMask options, written as a JavaScript object.

{ mask: '+{7} (000) 000-00-00' }

{
    mask: Number,
    thousandsSeparator: ' ',
    radix: ',',
    scale: 2
}

{
    mask: Date,
    pattern: 'd{.}`m{.}`Y',
    blocks: {
        d: { mask: IMask.MaskedRange, from: 1, to: 31 },
        m: { mask: IMask.MaskedRange, from: 1, to: 12 },
        Y: { mask: IMask.MaskedRange, from: 1900, to: 2099 }
    }
}

The options are a live JavaScript object, not JSON — which is why Number, Date and IMask.MaskedRange work in them. That also means a syntax error breaks the field rather than being reported.

The mask is part of the saved value

What the browser submits is the text as displayed, punctuation and all: a phone arrives as +7 (912) 345-67-89, not 79123456789. Fine for showing on a page — but if the number has to be compared, dialled or handed to an API, strip it on the way in or store it separately.

The library ships inside the package, so the mask works in a manager with no internet access.