Inputmask

A plugin to make masks on form fields.

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

Phone Number

Money

Credit Card

Either "4xxx xxxx xxxx xxxx" or "5xxx xxxx xxxx xxxx" or "6xxx xxxx xxxx xxxx" or "3xxx xxxx xxxx xxxx" format

Date

Email address

IP Address

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

By using code splitting and dynamic import techniques you don't need to worry about the size of the JavaScript file. Dashly will only import the necessary files when they are needed.

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