Easy Input Mask Component In Vanilla JavaScript & Vue.js – Maska
| AUTHOR: | beholdr |
|---|---|
| VIEWS TOTAL: | 26 views |
| OFFICIAL PAGE: | Go to website |
| LAST UPDATE: | February 23, 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.
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. It also provides a custom transform function that can be used to transform characters:
{
// '1234567890' -> '1010101010'
'T': { pattern: /[0-9]/, transform: (char) => String(Number(char) % 2) }
}7. Destroy the input mask plugin.
var myMask = Maska.create('.unmasked');
myMask.destroy();Changelog:
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
