Maska demo

Vue.js examples

Phone with code: {{ phone }} (raw value: {{ phoneRaw }})

v-maska="['+1 (###) ##-##-##', '+1 (###) ###-##-##']"

Reactive mask: use dot as date separator?

v-maska="dateMask" — reactive mask by `dateMask` computed property

Hex color (custom tokens): {{ color }}

v-maska="{ mask: '!#HHHHHH', tokens: { 'H': { pattern: /[0-9a-fA-F]/, uppercase: true }}}"

Masked input:

mask to apply:

Phone with code

data-mask="+1 (###) ###-####"

Cardholder name

data-mask="A* A*"

Leet speak (tokens with transform)

data-mask="T*"

All digits

data-mask="#*"

Dynamic mask

data-mask='["# cm", "#.# cm", "#.## cm"]'

Date

data-mask="##/##/####"

Credit card

data-mask="#### #### #### ####"

Hex color (custom tokens)

data-mask="!#HHHHHH"

Without mask (destroyed)

data-mask="###"

CPF/CNPJ

data-mask='["###.###.###-##", "##.###.###/####-##"]'