Sneak Peek! CoreUI 3 is coming! Please try the latest version - CoreUI PRO 3.0.0-alpha..
Try CoreUI PRO 3.0.0-alpha
Masked Input
This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).
Overview
A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.The following mask definitions are predefined:
- a - Represents an alpha character (A-Z,a-z)
- 9 - Represents a numeric character (0-9)
- * - Represents an alphanumeric character (A-Z,a-z,0-9)
Example
Date
<fieldset class="form-group">
<label>Date input</label>
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-calendar"></i>
</span>
</span>
<input type="text" class="form-control" id="date-input">
</div>
<small class="text-muted">ex. 99/99/9999</small>
</fieldset>
Phone
<fieldset class="form-group">
<label>Phone input</label>
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-phone"></i>
</span>
</span>
<input type="text" class="form-control" id="phone-input">
</div>
<small class="text-muted">ex. (999) 999-9999</small>
</fieldset>
Taxpayer Identification Numbers
<fieldset class="form-group">
<label>Taxpayer Identification Numbers</label>
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-usd"></i>
</span>
</span>
<input type="text" class="form-control" id="tin-input">
</div>
<small class="text-muted">ex. 99-9999999</small>
</fieldset>
Social Security Number
<fieldset class="form-group">
<label>Social Security Number</label>
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-male"></i>
</span>
</span>
<input type="text" class="form-control" id="ssn-input">
</div>
<small class="text-muted">ex. 999-99-9999</small>
</fieldset>
Eye Script
<fieldset class="form-group">
<label>Eye Script</label>
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-asterisk"></i>
</span>
</span>
<input type="text" class="form-control" id="eyescript-input">
</div>
<small class="text-muted">ex. ~9.99 ~9.99 999</small>
</fieldset>
Credit Card Number
<fieldset class="form-group">
<label>Credit Card Number</label>
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-credit-card"></i>
</span>
</span>
<input type="text" class="form-control" id="ccn" placeholder="0000 0000 0000 0000">
</div>
<small class="text-muted">ex. 9999 9999 9999 9999</small>
</fieldset>