Get support Purchase Now Preview Demo

Inputmask

A plugin to make masks on form fields.

Inputmask documentation share-external-link-1

Examples

Use the data-inputmask attribute with additional settings, like 'alias': 'datetime' or 'mask': '9', 'repeat': 10, or even 'mask': '99-9999999'.

Any option can also be passed through the use of a data attribute. Use data-inputmask-<the name of the option>="value".

Either "4xxx xxxx xxxx xxxx" or "5xxx xxxx xxxx xxxx" or "6xxx xxxx xxxx xxxx" or "3xxx xxxx xxxx xxxx" format
<div class="mb-3">
    <label for="PhoneNumberLabel" class="form-label">Phone Number</label>
    <input type="text" class="form-control" id="PhoneNumberLabel" placeholder="+x(xxx)xxx-xx-xx" data-inputmask="'mask': '+9(999)999-99-99'">
</div>

<div class="mb-3">
    <label for="money" class="form-label">Money</label>
    <input type="text" class="form-control" id="money" placeholder="$ x,xx.xx" data-inputmask="'alias': 'numeric', 'groupSeparator': ',', 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'">
</div>
  
<div class="mb-3">
    <label for="creditCard" class="form-label">Credit Card</label>
    <input type="text" class="form-control" id="creditCard" placeholder="xxxx xxxx xxxx xxxx" data-inputmask="'mask': ['4999 9999 9999 9999', '5999 9999 9999 9999', '6999 9999 9999 9999', '3999 999999 99999'], 'greedy': false, 'placeholder': '*', 'clearIncomplete': true, 'keepStatic': false">
    <div id="creditCardHelp" class="form-text">Either "4xxx xxxx xxxx xxxx" or "5xxx xxxx xxxx xxxx" or "6xxx xxxx xxxx xxxx" or "3xxx xxxx xxxx xxxx" format</div>
</div>

<div class="mb-3">
    <label for="date" class="form-label">Date</label>
    <input class="form-control" id="date" data-inputmask data-inputmask-alias="datetime" data-inputmask-inputformat="mm/dd/yyyy">
</div>

<div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input class="form-control" id="email" data-inputmask="'alias': 'email'" placeholder="_@_._">
</div>

<div>
    <label for="IPAddress" class="form-label">IP Address</label>
    <input type="text" class="form-control" id="IPAddress" data-inputmask="'alias': 'ip'">
</div>