How to use
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./node_modules/imask/dist/imask.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="./assets/js/hs.imask.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
(function() {
// INITIALIZATION OF INPUT MASK
// =======================================================
HSCore.components.HSMask.init('.js-input-mask')
})();
</script>
Basic example
<!-- Phone Number -->
<div class="mb-4">
<label for="PhoneNumberLabel" class="form-label">Phone Number</label>
<input type="text" class="js-input-mask form-control" id="PhoneNumberLabel" placeholder="+x(xxx)xxx-xx-xx"
data-hs-mask-options='{
"mask": "+0(000)000-00-00"
}'>
</div>
<!-- End Phone Number -->
<!-- Money -->
<div class="mb-4">
<label for="MoneyLabel" class="form-label">Money</label>
<input type="text" class="js-input-mask form-control" id="MoneyLabel" placeholder="$ x,xx.xx"
data-hs-mask-options='{
"mask": "$ 0,00.00"
}'>
</div>
<!-- End Money -->
<!-- Credit Card -->
<div class="mb-4">
<label for="CreditCardLabel" class="form-label">Credit Card</label>
<input type="text" class="js-input-mask form-control" id="CreditCardLabel" placeholder="xxxx xxxx xxxx xxxx"
data-hs-mask-options='{
"mask": "0000 0000 0000 0000"
}'>
</div>
<!-- End Credit Card -->
<!-- Date -->
<div class="mb-4">
<label for="DateLabel" class="form-label">Date</label>
<input type="text" class="js-input-mask form-control" id="DateLabel" placeholder="xx/xx/xxxx"
data-hs-mask-options='{
"mask": "00/00/0000"
}'>
</div>
<!-- End Date -->
<!-- Hour -->
<div class="mb-4">
<label for="HourLabel" class="form-label">Hour</label>
<input type="text" class="js-input-mask form-control" id="HourLabel" placeholder="xx:xx:xx"
data-hs-mask-options='{
"mask": "00:00:00"
}'>
</div>
<!-- End Hour -->
<!-- IP Address -->
<div class="mb-4">
<label for="IPAddressLabel" class="form-label">IP Address</label>
<input type="text" class="js-input-mask form-control" id="IPAddressLabel" placeholder="xxx.xxx.xxx.xxx"
data-hs-mask-options='{
"mask": "000.000.000.000"
}'>
</div>
<!-- End IP Address -->
<!-- Mixed -->
<div class="mb-4">
<label for="MixedLabel" class="form-label">Mixed</label>
<input type="text" class="js-input-mask form-control" id="MixedLabel" placeholder="AAA 000-S0S"
data-hs-mask-options='{
"mask": "AAA 000-S0S"
}'>
</div>
<!-- End Mixed -->
<!-- CPF -->
<div class="mb-4">
<label for="CPFLabel" class="form-label">CPF</label>
<input type="text" class="js-input-mask form-control" id="CPFLabel" placeholder="xxx.xxx.xxx-xx"
data-hs-mask-options='{
"mask": "000.000.000-00"
}'>
</div>
<!-- End CPF -->
<!-- CNPJ -->
<div class="mb-4">
<label for="CNPJLabel" class="form-label">CNPJ</label>
<input type="text" class="js-input-mask form-control" id="CNPJLabel" placeholder="xx.xxx.xxx/xxxx-xx"
data-hs-mask-options='{
"mask": "00.000.000/0000-00"
}'>
</div>
<!-- End CNPJ -->
<!-- Percent -->
<div class="mb-4">
<label for="PercentLabel" class="form-label">Percent</label>
<input type="text" class="js-input-mask form-control" id="PercentLabel" placeholder="##x,xx%"
data-hs-mask-options='{
"mask": "##0,00%"
}'>
</div>
<!-- End Percent -->
Modal example
Input Mask
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Input Mask</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<!-- Phone Number -->
<div class="mb-4">
<label for="PhoneNumberModalLabel" class="form-label">Phone Number</label>
<input type="text" class="js-input-mask form-control" id="PhoneNumberModalLabel" placeholder="+x(xxx)xxx-xx-xx"
data-hs-mask-options='{
"mask": "+0(000)000-00-00"
}'>
</div>
<!-- End Phone Number -->
<!-- Money -->
<div class="mb-4">
<label for="MoneyModalLabel" class="form-label">Money</label>
<input type="text" class="js-input-mask form-control" id="MoneyModalLabel" placeholder="$ x,xx.xx"
data-hs-mask-options='{
"mask": "$ 0,00.00"
}'>
</div>
<!-- End Money -->
<!-- Credit Card -->
<div class="mb-4">
<label for="CreditCardModalLabel" class="form-label">Credit Card</label>
<input type="text" class="js-input-mask form-control" id="CreditCardModalLabel" placeholder="xxxx xxxx xxxx xxxx"
data-hs-mask-options='{
"mask": "0000 0000 0000 0000"
}'>
</div>
<!-- End Credit Card -->
<!-- Date -->
<div class="mb-4">
<label for="DateModalLabel" class="form-label">Date</label>
<input type="text" class="js-input-mask form-control" id="DateModalLabel" placeholder="xx/xx/xxxx"
data-hs-mask-options='{
"mask": "00/00/0000"
}'>
</div>
<!-- End Date -->
<!-- Hour -->
<div class="mb-4">
<label for="HourModalLabel" class="form-label">Hour</label>
<input type="text" class="js-input-mask form-control" id="HourModalLabel" placeholder="xx:xx:xx"
data-hs-mask-options='{
"mask": "00:00:00"
}'>
</div>
<!-- End Hour -->
<!-- IP Address -->
<div class="mb-4">
<label for="IPAddressModalLabel" class="form-label">IP Address</label>
<input type="text" class="js-input-mask form-control" id="IPAddressModalLabel" placeholder="xxx.xxx.xxx.xxx"
data-hs-mask-options='{
"mask": "000.000.000.000"
}'>
</div>
<!-- End IP Address -->
<!-- Mixed -->
<div class="mb-4">
<label for="MixedModalLabel" class="form-label">Mixed</label>
<input type="text" class="js-input-mask form-control" id="MixedModalLabel" placeholder="AAA 000-S0S"
data-hs-mask-options='{
"mask": "AAA 000-S0S"
}'>
</div>
<!-- End Mixed -->
<!-- CPF -->
<div class="mb-4">
<label for="CPFModalLabel" class="form-label">CPF</label>
<input type="text" class="js-input-mask form-control" id="CPFModalLabel" placeholder="xxx.xxx.xxx-xx"
data-hs-mask-options='{
"mask": "000.000.000-00"
}'>
</div>
<!-- End CPF -->
<!-- CNPJ -->
<div class="mb-4">
<label for="CNPJModalLabel" class="form-label">CNPJ</label>
<input type="text" class="js-input-mask form-control" id="CNPJModalLabel" placeholder="xx.xxx.xxx/xxxx-xx"
data-hs-mask-options='{
"mask": "00.000.000/0000-00"
}'>
</div>
<!-- End CNPJ -->
<!-- Percent -->
<div class="mb-4">
<label for="PercentModalLabel" class="form-label">Percent</label>
<input type="text" class="js-input-mask form-control" id="PercentModalLabel" placeholder="##x,xx%"
data-hs-mask-options='{
"mask": "##0,00%"
}'>
</div>
<!-- End Percent -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Methods
| Parameters | Description | Default value |
|---|---|---|
|
|
Selector, inside the initialized element, which is responsible for adding a unit to the current value | '.js-plus' |
|
|
Selector, inside the initialized element, which is responsible for subtracting the unit from the current value | '.js-minus' |
|
|
Selector, inside the initialized element, which is responsible for displaying the current value | '.js-result' |