keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Input Mask

Input Mask.

Inputmask is a javascript library that creates an input mask. Inputmask can run against vanilla javascript, jQuery, and jqlite. Click here

Highlights

  • easy to use
  • optional parts anywhere in the mask
  • possibility to define aliases which hide the complexity
  • date / DateTime masks
  • numeric masks
  • lots of callbacks
  • non-greedy masks
  • many features can be enabled/disabled/configured by options
  • supports read-only/disabled/dir="rtl" attributes
  • support data-inputmask attribute(s)
  • alternator-mask
  • regex-mask
  • dynamic-mask
  • preprocessing-mask
  • JIT-masking
  • value formatting / validating without input element
  • AMD/CommonJS support
  • dependencyLibs: vanilla javascript, jQuery, jqlite
  • <input-mask> htmlelement

Initialization

This is the minified version of the Inputmask library that provides the core masking functionality.

<script src="assets/vendor/inputmask/inputmask.min.js"></script>



												

												
This file contains the custom initialization code to apply input masks to specific input fields.




<script src="assets/js/plugins-init/inputmask.js"></script>


											

										

									

									
									

										

											

												

													
Examples

													
												

											

											

												

													

														

															

																
																
																
Phone number format: (999) 999-9999

															

															

																
																
																
Date format: dd/mm/yyyy

															

															

																
																
																
Email format: _@_

															

															

																
																
																
IP Address format: 999.999.999.999

															

															

																
																
																
Currency format: € 999.999,99

															

															

																
																
																
With % suffix (e.g. 25 %)

															

															

																
																
																
ZIP Code format 99999

															

															

																
																
																
MAC Address format 00:00:00:00:00:00

															

															

																
																
																
Repeat any pattern like 9, 99, or 9999999999

															

															

																
																
																
Format with visible placeholder: (999) 999-9999

															

															

																
																
																
Credit Card Format: 9999 9999 9999 9999

															

															

																
																
																
2 digits decimal (e.g. 123.45)

															

															

																
																
																
SSN Format: 999-99-9999

															

														

													

													

														



<div class="row">
	<div class="col-lg-12 mb-3">
		<label for="inputMaskPhoneNumber" class="form-label">Phone Number</label>
		<input type="text" class="form-control mask-phone" id="inputMaskPhoneNumber">
		<div class="form-text">Phone number format: <code>(999) 999-9999</code></div>
	</div>
	<div class="col-lg-12 mb-3">
		<label for="inputMaskDate" class="form-label">Date</label>
		<input type="text" class="form-control mask-date" id="inputMaskDate">
		<div class="form-text">Date format: <code>dd/mm/yyyy</code></div>
	</div>
	<div class="col-lg-12 mb-3">
		<label for="inputMaskEmail" class="form-label">Email Address</label>
		<input type="text" class="form-control mask-email" id="inputMaskEmail">
		<div class="form-text">Email format: <code>_@_</code></div>
	</div>
	<div class="col-lg-12 mb-3">
		<label for="inputMaskIP" class="form-label">IP Address</label>
		<input type="text" class="form-control mask-ip" id="inputMaskIP">
		<div class="form-text">IP Address format: <code>999.999.999.999</code></div>
	</div>
	<div class="col-lg-12 mb-3">
		<label for="inputMaskCurrency" class="form-label">Currency</label>
		<input type="text" class="form-control mask-currency" id="inputMaskCurrency">
		<div class="form-text">Currency format: <code>€ 999.999,99</code></div>
	</div>
	<div class="col-lg-12 mb-3">
		<label for="inputMaskPercentage" class="form-label">Percentage</label>
		<input type="text" class="form-control mask-percentage" id="inputMaskPercentage">
		<div class="form-text">With % suffix (e.g. <code>25 %</code>)</div>
	</div>
	<div class="col-lg-12 mb-3">
		<label for="inputMaskZipCode" class="form-label">ZIP Code</label>
		<input type="text" class="form-control mask-zipcode" id="inputMaskZipCode">
		<div class="form-text">ZIP Code format <code>99999</code></div>
	</div>
	<div class="col-lg-12 mb-3">
		<label for="inputMaskMacAddress" class="form-label">MAC Address</label>
		<input type="text" class="form-control mask-mac" id="inputMaskMacAddress">
		<div class="form-text">MAC Address format <code>00:00:00:00:00:00</code></div>
	</div>
	<div class="col-lg-12 mb-3">
		<label for="inputMaskRepeating" class="form-label">Repeating Mask</label>
		<input type="text" class="form-control mask-repeating" id="inputMaskRepeating">
		<div class="form-text">Repeat any pattern like <code>9</code>, <code>99</code>, or <code>9999999999</code></div>
	</div>
	<div class="col-lg-12 mb-3">
		<label for="inputMaskPlaceholder" class="form-label">Placeholder</label>
		<input type="text" class="form-control mask-placeholder" id="inputMaskPlaceholder">
		<div class="form-text">Format with visible placeholder: <code>(999) 999-9999</code></div>
	</div>
	<div class="col-lg-12 mb-3">
		<label for="inputMaskCreditCard" class="form-label">Credit Card</label>
		<input type="text" class="form-control mask-cc" id="inputMaskCreditCard">
		<div class="form-text">Credit Card Format: <code>9999 9999 9999 9999</code></div>
	</div>
	<div class="col-lg-12 mb-3">
		<label for="inputMaskDecimal" class="form-label">Decimal</label>
		<input type="text" class="form-control mask-decimal" id="inputMaskDecimal">
		<div class="form-text">2 digits decimal (e.g. <code>123.45</code>)</div>
	</div>
	<div class="col-lg-12 mb-3">
		<label for="inputMaskSSN" class="form-label">SSN</label>
		<input type="text" class="form-control mask-ssn" id="inputMaskSSN">
		<div class="form-text">SSN Format: <code>999-99-9999</code></div>
	</div>
</div>