74 lines
1.1 KiB
Markdown
74 lines
1.1 KiB
Markdown
# @signalapp/minimask
|
|
|
|
> A tiny & modern library for masking inputs.
|
|
|
|
## Install
|
|
|
|
```sh
|
|
npm install --save @signalapp/minimask
|
|
```
|
|
|
|
## Usage
|
|
|
|
Setup an `<input>`:
|
|
|
|
```html
|
|
<input
|
|
id="creditCardNumber"
|
|
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)
|
|
```
|
|
|
|
## License
|
|
|
|
Copyright 2025 Signal Messenger, LLC
|
|
|
|
Licensed under the [AGPLv3](LICENSE)
|