// defaults are '0', 'a', '*'
'#': /[1-6]/
}
}).on('accept', function() {
document.getElementById('pattern-zip-complete').style.display = '';
document.getElementById('pattern-zip-unmasked').innerHTML = patternZipMask.unmaskedValue;
}).on('complete', function() {
document.getElementById('pattern-zip-complete').style.display = 'inline-block';
});
```
--------------------------------
### Build imaskjs (npm)
Source: https://github.com/unmanner/imaskjs/blob/master/README.md
This command is used to build the imaskjs library, typically when you are contributing to the project or need to generate a custom build. It utilizes npm scripts defined in the project.
```bash
npm run make
```
--------------------------------
### Pattern-Based NIC Mask with Dynamic Updates (JavaScript)
Source: https://github.com/unmanner/imaskjs/blob/master/docs/guide.html
Demonstrates a complex IMask.js pattern mask for NIC formats, including alphanumeric characters and placeholders. It features lazy input and event handling for displaying unmasked values. Additionally, it includes functionality to dynamically update the mask options (mask, lazy, overwrite, eager, placeholderChar) based on user input and UI elements.
```javascript
var customMask = IMask(document.getElementById('pattern-nic-mask'), {
mask: '{#}000[aaa]/NIC-`*[**]',
lazy: false
});
customMask.on('accept', function() {
document.getElementById('pattern-nic-complete').style.display = '';
document.getElementById('pattern-nic-unmasked').innerHTML = customMask.unmaskedValue;
}).on('complete', function() {
document.getElementById('pattern-nic-complete').style.display = 'inline-block';
});
var customEl = document.getElementsByClassName('pattern-nic-form')[0];
customEl.querySelector('[name=apply]').addEventListener('click', function () {
var mask = customEl.querySelector('[name=mask]').value;
var lazy = customEl.querySelector('[name=ph-show]').checked;
var overwrite = customEl.querySelector('[name=overwrite]').checked;
var eager = customEl.querySelector('[name=eager]').checked;
var placeholderChar = customEl.querySelector('[name=ph-char]').value || '_';
var value = customEl.querySelector('[name=raw]').value;
customEl.querySelector('[name=raw]').value = '';
var unmaskedValue = customEl.querySelector('[name=unmasked]').value;
customEl.querySelector('[name=unmasked]').value = '';
customMask.updateOptions({
mask: mask,
lazy: lazy,
overwrite: overwrite,
eager: eager,
placeholderChar: placeholderChar
});
if (value) customMask.value = value;
if (unmaskedValue) customMask.unmaskedValue = unmaskedValue;
});
```
--------------------------------
### Stop Listening to Events
Source: https://github.com/unmanner/imaskjs/blob/master/docs/guide.html
Unsubscribe from mask events to stop receiving notifications. You can remove specific handlers or all handlers for an event.
```javascript
mask.off('accept', log);
// omit handler argument to unbind all handlers
mask.off('complete');
```
--------------------------------
### Destroy Mask Instance
Source: https://github.com/unmanner/imaskjs/blob/master/docs/guide.html
Clean up and remove the mask from an element. This is important for preventing memory leaks when the mask is no longer needed.
```javascript
mask.destroy();
```
--------------------------------
### Update Mask Options
Source: https://github.com/unmanner/imaskjs/blob/master/docs/guide.html
Dynamically update the mask's options after initialization. This allows for changing mask behavior, such as setting numeric ranges.
```javascript
mask.updateOptions({
mask: Number,
min: 0,
max: 100
}); // also updates UI
```
--------------------------------
### Create Masked Input Component with Solid IMask
Source: https://github.com/unmanner/imaskjs/blob/master/packages/solid-imask/README.md
Demonstrates how to create a reusable masked input component using `createMaskedInput` from `solid-imask`. This component allows for custom masks, lazy input, and placeholder characters. It also shows how to handle `onAccept` and `onComplete` events.
```javascript
import { createMaskedInput } from "solid-imask";
const NumberInput = createMaskedInput({
mask: "+{7}(000)000-00-00",
lazy: false, // make placeholder always visible
placeholderChar: "#", // defaults to "_"
});
const App = () => {
return (
{
console.log({ value, unmaskedValue, typedValue });
console.log(maskRef);
console.log(e);
}}
onComplete={() => console.log("complete")}
>
);
};
```
--------------------------------
### Create Mask Without UI
Source: https://github.com/unmanner/imaskjs/blob/master/docs/guide.html
Instantiate a mask model directly without attaching it to an HTML element. This is useful for processing or validating input programmatically.
```javascript
const masked = IMask.createMask({
mask: '+7 (000) 000-00-00',
// ...and other options
});
masked.resolve('71234567890'); // now you can access masked value
console.log(masked.value); // and get unmasked value
console.log(masked.unmaskedValue);
```
--------------------------------
### Access Masked Model
Source: https://github.com/unmanner/imaskjs/blob/master/docs/guide.html
Retrieve the underlying `Masked` model instance from the mask. This allows for direct manipulation of the masking logic without necessarily updating the UI.
```javascript
const masked = mask.masked;
masked.reset(); // UI will NOT be updated
```
--------------------------------
### Initialize IMask with Multiple Document Masks in JavaScript
Source: https://github.com/unmanner/imaskjs/blob/master/packages/imask/example.html
Sets up IMask with two mask patterns for Brazilian documents (CPF: 000.000.000-00 and CNPJ: 00.000.000/0000-00). Attaches an 'accept' event listener to update DOM elements with masked and unmasked values. The input element references are retrieved from the document and IMask instance properties are logged on value acceptance.
```javascript
const opts = {
mask: [
{ mask: '000.000.000-00' },
{ mask: '00.000.000/0000-00' }
]
};
const input = document.getElementById('input');
var result = document.getElementById('value');
var unmasked = document.getElementById('unmasked');
var imask = IMask(input, opts).on('accept', () => {
console.log('accept', imask.value, imask.unmaskedValue, imask.typedValue);
result.innerHTML = imask.value;
unmasked.innerHTML = imask.unmaskedValue;
});
```
--------------------------------
### IMaskJS: Function Mask for Growing Digits
Source: https://github.com/unmanner/imaskjs/blob/master/docs/guide.html
Implements a custom function mask that accepts a growing sequence of digits from 0 to 9, validating each character and its relation to the previous one.
```javascript
IMask(element, {
mask: value => /^\d*$/.test(value) && value.split('').every((ch, i) => {
const prevCh = value[i-1];
return !prevCh || prevCh < ch;
})
})
```