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.

javascript

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

javascript

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

javascript

{
    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 is loaded from a CDN

IMask comes from unpkg.com and is not bundled with the component. In a manager with no internet access the mask simply does not apply and the field behaves as plain text.

Imask Field ​

Imask Field