Quick start

Bind after the input exists and dispose when it is removed or needs a different mask.

<input id="phone" type="text" inputmode="tel" aria-label="Phone number" />

import { bind, process } from 'mother-mask'

const input = document.querySelector<HTMLInputElement>('#phone')!
const mask = '(99) 99999-9999'
input.value = process('11987654321', mask)

const dispose = bind(input, mask, {
  autocomplete: 'tel',
  onChange: value => console.log(value),
})

// Later, during cleanup, before rebinding or removing the input:
// dispose()

A binding formats edits, not the initial value or programmatic assignments. Use process() or formatDecimalValue() for those. Callbacks run after edits, not on initial binding. Rebinding an already-bound input does nothing; dispose the original binding first. Bindings default autocomplete, autocorrect, and autocapitalize to off, and spellcheck to false; all four are configurable. Cleanup removes listeners, pending frames, and library-added attributes while preserving author-supplied attributes.