Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/degjs/simplemask
A less intrusive, reusable masking plugin.
https://github.com/degjs/simplemask
Last synced: about 1 month ago
JSON representation
A less intrusive, reusable masking plugin.
- Host: GitHub
- URL: https://github.com/degjs/simplemask
- Owner: DEGJS
- License: mit
- Created: 2020-10-21T19:02:49.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-01-25T21:32:41.000Z (almost 4 years ago)
- Last Synced: 2024-04-23T14:43:20.507Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 188 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# simpleMask
simpleMask is a masking plugin that leverages the focusout and focusin events to provide a more accessible, less intrusive masking experience.
## Install
simpleMask is an ES6 module. Consequently, you may need a transpiler ([Babel](https://babeljs.io) is a nice one) to compile DomEvent into compatible Javascript for your runtime environment.
If you're using NPM, you can install DomEvent with the following command:
```
$ npm install @degjs/simple-mask
```
## Usage
``` javascript
import simpleMask from '@degjs/simple-mask';
const container = document.querySelector('.container');
simpleMask(container, {
inputSelector: '.js-mask',
format: 'XXX-XX-XXXX',
numeric: true
})
```
With the setup above, after a user has met the expected character length (automatically determined by the ```format``` parameter) and then triggers the focusout event, the input value will become ```XXX-XX-XXXX```, with ```X``` representing characters typed.
For example: If a user typed ```000000000``` it will become ```000-00-0000```.
When a user focuses the input again, the value will then revert back to its previous state, in the case above: ```000000000```
simpleMask looks at the charcters in the ```format``` parameter to determine which characters to replace. By default, ```X``` is used to represent expected user input.
You can set the parameter ```maskPlaceholder``` to whatever you'd like, to change it.
## Parameters
### inputSelector
Type: `string`
The selector for the input that will be masked.
Default: `null`
### format
Type: `string`
This will determine how the input value should be masked.
Default: `null`
### maskPlaceholder
Type: `string`
This will be used to determine what characters in the format `parameter` are expected to be user input.
Default: `X`
### numeric
Type: `boolean`
Determines if users will be allowed to type numbers.
Default: `false`
### alphanumeric
Type: `boolean`
Determines if users will be allowed to type numbers and letters
Default: `false`
### alphanumericPattern
Type: `RegExp`
Determines the `RegExp` pattern for numbers and letters.
Default: `/^[a-zA-Z0-9\.]*$/`
### numericPattern
Type: `RegExp`
Determines the `RegExp` pattern for numbers.
Default: `[0-9\/]+/`
### customPattern
Type: `RegExp`
Allows for a custom `RegExp` pattern to be used to restrict user input in any way that you may need.
Default: `[0-9\/]+/`
### onMaskCallback
Type: `Function`
Callback that fires when an input has been masked.
Default: `null`
### onFailedInputCallback
Type: `Function`
Callback that fires when an a restricted key has been pressed
Default: `null`