Simple HTML input masking
npm install @signalapp/minimask> A tiny & modern library for masking inputs.
``sh`
npm install --save @signalapp/minimask
Setup an :
`html`
type="text"
inputmode="numeric"
autocomplete="cc-number"
placeholder="1234 1234 1234 1234"
size="20"
/>
Create a formatter:
`js
export function creditCardNumberFormatter(input) {
let tokens = []
let digits = 0
for (let [index, char] of input.split("").entries()) {
// skip non-digits
if (!/\d/.test(char)) {
continue
}
// push digits
tokens.push({ char, index, mask: false })
digits++
// insert spaces when needed
if (digits === 4 || digits === 8 || digits === 12) {
tokens.push({ char: " ", index, mask: true })
}
// ignore any additional chars
if (digits >= 16) {
break
}
}
return tokens
}
`
Attach the formatter to the input:
`js
import { minimask } from "minimask"
import { creditCardNumberFormatter } from "./formatters"
let input = document.querySelector("#creditCardNumber")
minimask(input, formatter)
``
Copyright 2025 Signal Messenger, LLC
Licensed under the AGPLv3