Framework Agnostic Accessible Input Masking Library

input-mask.js enables you to include a mask on any input where a specific data input format is required. The placeholder text stays in place, and displays the characters that still need to be included. The placeholder is a customizable CSS.

The user can enter letters and numbers. All other characters, such as spaces, dashes, and parentheses are automatically added by the script, making data entry easier when using dynamic keyboards.

javascript masking library, input mask accessibility, text mask input, masking and unmasking in javascript, javascript input mask

A Lightweight Tiny Input Mask Library For Vue.js | Input Facade

How to make use of it:

JavaScript masking-input.js file in the document and the mask input library.

<script src="js/masking-input.js" data-autoinit="true"></script>

Set the input masks and validation rules as follows:

<label for="expiration">Credit Card Expiration Month</label>
<input id="expiration" type="tel" placeholder="MM/YY" class="masked" pattern="(1[0-2]|0[1-9])\/\d\d" data-valid-example="11/18" title="2-digit month and 2-digit year greater than 01/15">
<label for="zip">Zip Code</label>
<input id="zip" type="tel" name="zipcode" placeholder="XXXXX" pattern="\d{5}" class="masked" title="5-digit zip code">
<label for="zipca">Canadian Zip Code</label>
<input id="zipca" type="text" name="zipcodeca" placeholder="XXX XXX" pattern="\w\d\w \d\w\d" class="masked" data-charset="_X_ X_X" title="6-character alphanumeric zip code in the format of A1A 1A1">
<label for="tel">Telephone</label>
<input id="tel" type="tel" name="phone" placeholder="(XXX) XXX-XXXX" pattern="\(\d{3}\) \d{3}\-\d{4}" class="masked" title="10-digit number">
<label for="cc">Credit Card Number</label>
<input id="cc" type="tel" name="ccnumber" placeholder="XXXX XXXX XXXX XXXX" pattern="\d{4} \d{4} \d{4} \d{4}" class="masked" title="16-digit number">

Accessible Input Masking Library, input-mask.js Plugin/Github