Input mask

The jQuery replacement for select boxes.

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

Phone number

Money

Credit card

Date

Hour

IP address

Mixed

CPF

CNPJ

Percent

<!-- 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="(+xx)xxxxx-xx-xx-xx"
         data-hs-mask-options='{
           "template": "(+00)00000-00-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.

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="(+xx)xxxxx-xx-xx-xx"
          data-hs-mask-options='{
            "template": "(+00)00000-00-00-00",
            "clearIfNotMatch": true
          }'>

Custom Pattern

Use "clearIfNotMatch": true.

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="(+xx)xxxxx-xx-xx-xx"
          data-hs-mask-options='{
            "template": "(+00)00000-00-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

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">
      <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="(+00)00000-00-00-00"
                   data-hs-mask-options='{
                     "template": "(+00)00000-00-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
`template`	Mask data	`null`