Input Masking

Masks format user input in real time. Applied automatically in FormRenderer; also usable standalone.

Presets

phone-ru

+7 (916) 123-45-67

phone-eu

+49 (30) 123-45-67

date

01.01.2024

inn

123456789012

iban

GB29 NWBK 6016 1331 9268 19

{ type: 'text', name: 'phone', mask: { preset: 'phone-ru' } }

Custom patterns

# = digit, A = letter (uppercased), anything else = literal.

{ type: 'text', name: 'postcode', mask: { pattern: 'AA####' } }  // AB1234

Standalone API

import { applyMask, removeMask, bindMask } from '@macrulez/vue-form-schema'

applyMask('9161234567', { preset: 'phone-ru' }) // '+7 (916) 123-45-67'
removeMask('+7 (916) 123-45-67', { preset: 'phone-ru' }) // '9161234567'

const cleanup = bindMask(inputEl, { preset: 'date' })
onUnmounted(cleanup)