A small javascript library to force inputs masking using BBj supported masks
yarn add BasisHub/bbj-masks BasisHub/basis-input-masking npm install BasisHub/bbj-masks BasisHub/basis-input-masking <script src="node_modules/bbj-masks/dist/bbj-masks.min.js"></script> <script src="node_modules/basis-input-masking/dist/basis-input-masking.js"></script>The library ships two components :
- TextInput : force bbj-string masks on inputs
- NumberInput : force bbj-number masks on inputs
The TextInput will wrap text inputs and apply the given bbj string mask. You can combine masks with patterns to get accurate validation. In case the input lives in a form then the masked and the unmasked values will be submitted when the form is submitted
 IE / Edge |  Firefox |  Chrome |  Safari |  iOS Safari |  Opera |
|---|---|---|---|---|---|
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
<!-- masked value is +(49) 156 610 110 20 --> <input class="bbj-text-masked" name="test" id="test" value="4915661011020" data-mask="+(00) 000 000 000 00" /> <script> document.addEventListener('DOMContentLoaded', function(e) { new Basis.InputMasking.TextInput({ onUpdate: (maskedValue, rawValue, input) => { // do something }, onInvalid: (err, input) => { // do something }, }) }) </script>Options
Options can be passed via data attributes . For data attributes, append the option name to data-, as in data-mask
| Option | Default | Description |
|---|---|---|
| mask | The bbj string mask @see BBj String Masks |
The NumberInput will wrap text inputs and apply the given bbj number mask. In case the input lives in a form then the masked and the unmasked values will be submitted when the form is submitted
IE / Edge | Firefox | Chrome | Safari | iOS Safari | Opera |
|---|---|---|---|---|---|
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
<!-- masked value is 1,234 --> <input class="bbj-number-masked" name="test" id="test" value="1234" data-mask="##,##0" /> <script> document.addEventListener('DOMContentLoaded', function(e) { new Basis.InputMasking.NumberInput({ onUpdate: (maskedValue, rawValue, input) => { // do something }, onInvalid: (err, input) => { // do something }, }) }) </script>Options
Options can be passed via data attributes . For data attributes, append the option name to data-, as in data-mask
| Option | Default | Description |
|---|---|---|
| mask | The bbj number mask @see BBj Number Masks | |
| min | The maximum value to accept for this input | |
| max | The minimum value to accept for this input | |
| step | A stepping interval to use when using up and down arrows to adjust the value, as well as for validation | |
| grouping-separator | , | a char which will be used as a grouping separator |
| decimal-separator | . | a char which will be used as a decimal separator |
| force-trailing-zeros | false | Affects the output by switching the way a mask with "#" characters in the trailing positions is filled. for example, the function NumberMask.mask(.10:"#.##") returns .10 instead of .1 |
Licensed under the MIT License.