Input mask

The jQuery replacement for select boxes.

Input mask documentation

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="../../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.

              
                <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>
                    
                  

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

template

Mask data null