Input Mask

How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

              
                <script src="../assets/vendor/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.

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // initialization of Input Masks
                    $('.js-masked-input').each(function () {
                      $.HSCore.components.HSMask.init($(this));
                    });
                  });
                </script>

Phone Number

Money

Credit Card

Date

Hour

IP Address

Mixed

CPF

CNPJ

Percent

                    
                      <!-- Phone Number -->
                      <div class="form-group">
                        <label for="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 for="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 for="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 for="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 for="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 for="IPAddressLabel" class="input-label">IP Address</label>
                        <input type="text" class="js-masked-input form-control" id="IPAddressLabel" placeholder="xxx.xxx.xxx.xxx"
                          data-hs-mask-options='{
                            "template": "000.000.000.000"
                          }'>
                      </div>
                      <!-- End IP Address -->

                      <!-- Mixed -->
                      <div class="form-group">
                        <label for="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 for="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 for="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 for="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

Preview
HTML

                    
                      <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

Preview
HTML

                    
                      <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

Preview
HTML

                    
                      <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 () {
                          $.HSCore.components.HSMask.init($('#js-masked-input-complite-handle'), {
                            onComplete: function(phone) {
                              alert('Phone Completed!: ' + phone);
                            }
                          });
                        });
                      </script>

Preview
HTML

                    
                      <!-- 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">
                            <!-- Header -->
                            <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">Copy to clipboard</h5>
                              <button type="button" class="btn btn-icon btn-sm btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
                                <i class="tio-clear tio-lg" aria-hidden="true"></i>
                              </button>
                            </div>
                            <!-- End Header -->

                            <!-- Body -->
                            <div class="modal-body">
                              <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>
                            <!-- End Body -->

                            <!-- Footer -->
                            <div class="modal-footer">
                              <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                              <button type="button" class="btn btn-primary">Continue</button>
                            </div>
                            <!-- End Footer -->
                          </div>
                        </div>
                      </div>
                      <!-- End Modal -->

Methods

Parameters	Description	Default value
`template`	Mask data	`null`