Author: | beholdr |
---|---|
Views Total: | 901 views |
Official Page: | Go to website |
Last Update: | November 14, 2021 |
License: | MIT |
Preview:

Description:
Maska is a small and customizable input mask component for Vanilla JavaScript and Vue.js framework.
How to use it (Vanilla JS):
1. Install and download the Maska library.
# NPM $ npm install maska --save
2. Load the Maska library from the dist folder.
<script src="/dist/maska.js"></script>
3. Define the mask rules in the data-mask attribute. All default tokens:
- ‘#’: { pattern: /[0-9]/ },
- ‘X’: { pattern: /[0-9a-zA-Z]/ },
- ‘S’: { pattern: /[a-zA-Z]/ },
- ‘A’: { pattern: /[a-zA-Z]/, uppercase: true },
- ‘a’: { pattern: /[a-zA-Z]/, lowercase: true },
- ‘!’: { escape: true },
- ‘*’: { repeat: true }
<input data-mask="+1 (###) ###-####" class="masked" type="tel" autocomplete="tel"> <input data-mask="A* A*" class="masked"> <input data-mask="##/##/####" class="masked"> <input data-mask="#*" class="masked">
4. Initialize the plugin on the input and done.
Maska.create('.masked');
5. Customize the mask tokens.
var mask = Maska.create('.masked', { '#': { pattern: /[0-9]/ }, 'X': { pattern: /[0-9a-zA-Z]/ }, 'S': { pattern: /[a-zA-Z]/ }, 'A': { pattern: /[a-zA-Z]/, uppercase: true }, 'a': { pattern: /[a-zA-Z]/, lowercase: true }, '!': { escape: true }, '*': { repeat: true } });
6. You can now pass custom preprocessing transformation function for entire input
var mask = Maska.create('.masked', { preprocessor: value => { return value.toUpperCase(); } });
7. Destroy the input mask plugin.
var myMask = Maska.create('.unmasked'); myMask.destroy();
Changelog:
v1.5.0 (11/14/2021)
- Add preprocessor option
v1.4.7 (11/07/2021)
- Fix unnecessary mask update on state change
v1.4.6 (10/02/2021)
- Fixed init value in vue 3.x
v1.4.5 (07/23/2021)
- Fixed bugs in Vue 3+
v1.4.4 (07/10/2021)
- Fixed bugs in Vue
v1.4.3 (07/02/2021)
- Make tokens argument optional
v1.4.2 (05/28/2021)
- Bugfix
v1.4.1 (02/23/2021)
- Fixed bug with dynamic mask
v1.4.0 (02/07/2021)
- Ability to get raw (unmasked) value
v1.3.2 (11/30/2020)
- Add typescript basic declarations
v1.3.1 (10/16/2020)
- Better support for Vue.js 3.
v1.2.0 (10/11/2020)
- Added custom transform function support alongside uppercase and lowercase
v1.2.0 (10/11/2020)
- Added custom transform function support alongside uppercase and lowercase
v1.2.0 (09/28/2020)
- Now the masked symbol is shown immediately
v1.1.6 (09/13/2020)
- Fix cursor jumps when editing first symbol
v1.1.5 (08/20/2020)
- Update
v1.1.4 (03/14/2020)
- Update
v1.1.2 (02/08/2020)
- Prevent adding multiple event listeners