Masked Input

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.maskedinput/src/jquery.maskedinput.js"></script>
            
          

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

            
              <script src="../../assets/js/components/hs.masked-input.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 input mask
                  $.HSCore.components.HSMaskedInput.init('.js-masked-input');
                });
              </script>
            
          

Basic example

                  
                    <!-- Masked Input -->
                    <form action="/">
                      <div class="form-group mb-3">
                        <label class="d-block small text-muted mb-1" for="primaryPhone">Primary phone</label>

                        <div class="input-group">
                          <input id="primaryPhone" class="js-masked-input form-control rounded pr-7" name="primaryPhone" type="tel" placeholder="+x(xxx)xxx-xx-xx"
                                 data-mask="+9(999)999-99-99">

                          <div class="input-group-append-merge">
                            <i class="nova-check-box icon-text text-secondary"></i>
                          </div>
                        </div>
                      </div>
                    </form>
                    <!-- End Masked Input -->
                  
                

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-mask="".