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

CoreUI Pro Component

Date input

ex. 99/99/9999

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

$('#date').mask('99/99/9999');

Phone

CoreUI Pro Component

Phone input

ex. (999) 999-9999

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

$('#phone').mask('(999) 999-9999');

Taxpayer Identification Numbers

CoreUI Pro Component

Taxpayer Identification Numbers

ex. 99-9999999

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

$('#tin').mask('99-9999999');

CoreUI Pro Component

Social Security Number

ex. 999-99-9999

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

$('#tin').mask('999-99-9999');

Eye Script

CoreUI Pro Component

Eye Script

ex. ~9.99 ~9.99 999

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

$('#tin').mask('~9.99 ~9.99 999');

Credit Card Number

CoreUI Pro Component

Credit Card Number

ex. 9999 9999 9999 9999

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

$('#tin').mask('9999 9999 9999 9999');

Overview
Example