@ionited/mask v0.6.2
Mask
Create your masks easily
Mask comes with two basic implementations MaskDefault and MaskNumber, but you can use MaskCore to do your own masks implementation easily.
Quick start
Choose your favorite option below:
Install with NPM
npm i @ionited/mask
Get from UNPKG
https://unpkg.com/@ionited/mask@latest/dist/mask.js
Usage
To basic usage you can simply call:
Mask(document.querySelector('#input1'), { mask: '(99) 9999-9999' }); // To use MaskDefault
Mask(document.querySelector('#input2'), { number: true }); // To use MaskNumber
MaskDefault
A mask that receives a regex or a string with numbers, letters or other symbols
Mask(el: HTMLElement, { mask: RegExp | string | MaskDefaultOptions });
interface MaskDefaultOptions {
allowEmpty?: boolean;
mask: RegExp | string;
}
Symbol | Pattern | Description |
---|---|---|
9 | /^[0-9]$/ | Only numbers |
A | /^[A-Za-zÀ-ÿ]$/ | Only letters |
Any other symbol is fixed.
MaskNumber
A mask for monetary and decimal values
Mask(el: HTMLElement, { number: true | MaskNumberOptions });
interface MaskNumberOptions {
allowEmpty: boolean;
allowNegative: boolean;
decimal: number;
decimalPoint: string;
end: boolean;
prefix: string;
suffix: string;
thousandPoint: string;
}
MaskCore
You can create your own mask logic easily, you only need register
a mask and use:
Mask.register(name: string, mask: any): void;
The recommended way to do a new mask is writing a class that extends MaskOptions
interface MaskOptions {
instance: MaskCore;
init?(data: MaskData): void;
input?(data: MaskData): void;
format(data: MaskData): void;
focus?(data: MaskData): void;
blur?(data: MaskData): void;
mouseover?(data: MaskData): void;
mouseout?(data: MaskData): void;
}
interface MaskData {
cursorPosition: number;
delete: boolean;
focus: boolean;
input: string;
inputRaw: string;
output: string;
}
MyMask example (only accept numbers):
import { MaskData, MaskCore, MaskOptions } from '@ionited/mask/core';
export class MyMask implements MaskOptions {
instance: MaskCore;
constructor(el: HTMLInputElement) {
this.instance = new MaskCore(el, this);
}
init(data: MaskData) {
this.format(data);
}
format(data: MaskData) {
data.output = data.input.replace(/[^0-9]/g, '');
}
}
Register and use:
Mask.register('myMask', MyMask); // Register
Mask(document.querySelector('#myMask'), { myMask: true }); // Enjoy your own mask!
License
Copyright (c) 2021 Ion. Licensed under MIT License.
1 month ago
1 month ago
7 months ago
8 months ago
12 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago