innoboxrr-maskjs

innoboxrr-maskjs

Máscaras de entrada. Sin dependencias, sin estado y sin framework.

npm i innoboxrr-maskjs

La idea

Una máscara son dos cadenas de la misma longitud:

const PHONE = {
    format: '(***) ***-****',   // qué se admite en cada posición
    mask:   '(___) ___-____',   // la plantilla que se ve
}

En format, cada carácter dice qué se admite:

Cualquier otro carácter es un literal: se emite el que ocupe esa misma posición en mask.

Núcleo

import { applyMask, unmask, isComplete } from 'innoboxrr-maskjs'

applyMask('5512345678', PHONE)
// { value: '(551) 234-5678', cursor: 14, complete: true }

unmask('(551) 234-5678', PHONE)   // '5512345678'  <- esto es lo que se envía
isComplete('551234', PHONE)       // false

applyMask no sabe cómo llegó el valor —tecleado, pegado, borrado o cargado de la API—: extrae los caracteres que valen y los recoloca. Es idempotente, así que se puede llamar en cada pulsación.

Vue

import { formatDirective as vFormat } from 'innoboxrr-maskjs/vue'

<input v-format="PHONE" v-model="phone">

La directiva se actualiza si cambia la máscara y se desengancha al desmontar.

React

Para un input controlado, que es lo normal, no hace falta hook:

<input
    value={phone}
    onChange={(e) => setPhone(applyMask(e.target.value, PHONE).value)} />

Para uno no controlado:

import { useMask } from 'innoboxrr-maskjs/react'

const ref = useMask(PHONE)

<input ref={ref} />

Qué cambió en la 2.0

La 1.x tenía tres fallos, los tres cubiertos ahora por tests:

• Pegar se comía caracteres. El camino de insertFromPaste avanzaba de dos en dos: pegar 5512345678 sobre (***) ***-**** daba (524) 6__-____.
• La regla de alfanuméricos llevaba flag g, así que lastIndex sobrevivía entre llamadas y .test() alternaba entre true y false sobre el mismo carácter. Además el patrón era [^a-z0-9], justo lo contrario.
• La directiva solo enganchaba en mounted: cambiar la máscara después no hacía nada, y al desmontar el componente los listeners se quedaban.

La API cambió: DoEntireFormat y format(elem, ...) eran internos y ya no se exportan. En su lugar están applyMask, unmask, isComplete y maskElement, y la directiva de Vue vive en innoboxrr-maskjs/vue.