How to use?
Add the following library Input mask stylesheet and script in your page.
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./node_modules/jquery-mask-plugin/dist/jquery.mask.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.mask.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// INITIALIZATION OF MASKED INPUT
// =======================================================
$('.js-masked-input').each(function () {
var mask = $.HSCore.components.HSMask.init($(this));
});
});
</script>
Examples
<!-- Phone Number -->
<div class="form-group">
<label id="phoneNumberLabel" class="input-label">Phone number</label>
<input type="text" class="js-masked-input form-control" id="phoneNumberLabel" placeholder="+x(xxx)xxx-xx-xx"
data-hs-mask-options='{
"template": "+0(000)000-00-00"
}'>
</div>
<!-- End Phone Number -->
<!-- Money -->
<div class="form-group">
<label id="moneyLabel" class="input-label">Money</label>
<input type="text" class="js-masked-input form-control" id="moneyLabel" placeholder="$ x,xx.xx"
data-hs-mask-options='{
"template": "$ 0,00.00"
}'>
</div>
<!-- End Money -->
<!-- Credit Card -->
<div class="form-group">
<label id="creditCardLabel" class="input-label">Credit card</label>
<input type="text" class="js-masked-input form-control" id="creditCardLabel" placeholder="xxxx xxxx xxxx xxxx"
data-hs-mask-options='{
"template": "0000 0000 0000 0000"
}'>
</div>
<!-- End Credit Card -->
<!-- Date -->
<div class="form-group">
<label id="dateLabel" class="input-label">Date</label>
<input type="text" class="js-masked-input form-control" id="dateLabel" placeholder="xx/xx/xxxx"
data-hs-mask-options='{
"template": "00/00/0000"
}'>
</div>
<!-- End Date -->
<!-- Hour -->
<div class="form-group">
<label id="hourLabel" class="input-label">Hour</label>
<input type="text" class="js-masked-input form-control" id="hourLabel" placeholder="xx:xx:xx"
data-hs-mask-options='{
"template": "00:00:00"
}'>
</div>
<!-- End Hour -->
<!-- IP Address -->
<div class="form-group">
<label id="IPAddress" class="input-label">IP address</label>
<input type="text" class="js-masked-input form-control" id="IPAddress" placeholder="xxx.xxx.xxx.xxx"
data-hs-mask-options='{
"template": "000.000.000.000"
}'>
</div>
<!-- End IP Address -->
<!-- Mixed -->
<div class="form-group">
<label id="mixedLabel" class="input-label">Mixed</label>
<input type="text" class="js-masked-input form-control" id="mixedLabel" placeholder="AAA 000-S0S"
data-hs-mask-options='{
"template": "AAA 000-S0S"
}'>
</div>
<!-- End Mixed -->
<!-- CPF -->
<div class="form-group">
<label id="CPFLabel" class="input-label">CPF</label>
<input type="text" class="js-masked-input form-control" id="CPFLabel" placeholder="xxx.xxx.xxx-xx"
data-hs-mask-options='{
"template": "000.000.000-00"
}'>
</div>
<!-- End CPF -->
<!-- CNPJ -->
<div class="form-group">
<label id="CNPJLabel" class="input-label">CNPJ</label>
<input type="text" class="js-masked-input form-control" id="CNPJLabel" placeholder="xx.xxx.xxx/xxxx-xx"
data-hs-mask-options='{
"template": "00.000.000/0000-00"
}'>
</div>
<!-- End CNPJ -->
<!-- Percent -->
<div class="form-group">
<label id="percentLabel" class="input-label">Percent</label>
<input type="text" class="js-masked-input form-control" id="percentLabel" placeholder="##x,xx%"
data-hs-mask-options='{
"template": "##0,00%"
}'>
</div>
<!-- End Percent -->
Selected on focus
Use "selectOnFocus": true.
<input type="text" class="js-masked-input form-control" placeholder="xx/xx/xxxx"
data-hs-mask-options='{
"template": "00/00/0000",
"selectOnFocus": true
}'>
Autoclear
Use "clearIfNotMatch": true.
<input type="text" class="js-masked-input form-control" placeholder="+x(xxx)xxx-xx-xx"
data-hs-mask-options='{
"template": "+0(000)000-00-00",
"clearIfNotMatch": true
}'>
Custom Pattern
Use "clearIfNotMatch": true.
<input type="text" class="js-masked-input form-control" placeholder="A-**-000-a000"
data-hs-mask-options='{
"template": "A-**-000-a000",
"translation": {
"*": {"pattern": "[A-Za-z0-9]"}
}
}'>
Complite Handle
<input type="text" id="js-masked-input-complite-handle" class="form-control" placeholder="+x(xxx)xxx-xx-xx"
data-hs-mask-options='{
"template": "+0(000)000-00-00"
}'>
<script>
$(document).on('ready', function () {
// INITIALIZATION OF MASKED INPUT
// =======================================================
$.HSCore.components.HSMask.init($('#js-masked-input-complite-handle'), {
onComplete: function(phone) {
alert('Phone Completed!: ' + phone);
}
});
});
</script>
Modal example
<!-- Button Trigger Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Open modal
</button>
<!-- End Button Trigger Modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="la la-times" aria-hidden="true"></i>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Phone number</label>
<input type="text" class="js-masked-input form-control" placeholder="+x(xxx)xxx-xx-xx"
data-hs-mask-options='{
"template": "+0(000)000-00-00"
}'>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Continue</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// INITIALIZATION OF MASKED INPUT
// =======================================================
$('.js-masked-input').each(function () {
var masked = $.HSCore.components.HSMask.init($(this));
masked.unmask();
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-mask-options='{
...
// Custom
"template": "+0(000)000-00-00"
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-mask-options='{}'. For more detailed or missing attributes/functions, see the official Input mask documentation page.
| Parameters | Description | Default value |
|---|---|---|
|
|
Mask data | null |