Input Masks

Cleave.js has a simple purpose: to help you format input text content automatically. Read the Official Cleave.js Website for a full list of instructions and other options.

Credit Card Formatting

Mask a credit card input element to identify users the type of credit card.

<input id="inputCreditCard" class="form-control" type="text" placeholder="Enter credit card number">

<div id="creditCardType" class="d-flex tx-28 tx-gray-500 mg-t-10">
  <div class="amex lh-1"><i class="fab fa-cc-amex"></i></div>
  <div class="visa lh-1 mg-l-5"><i class="fab fa-cc-visa"></i></div>
  <div class="mastercard lh-1 mg-l-5"><i class="fab fa-cc-mastercard"></i></div>
  <div class="jcb lh-1 mg-l-5"><i class="fab fa-cc-jcb"></i></div>
  <div class="discover lh-1 mg-l-5"><i class="fab fa-cc-discover"></i></div>
  <div class="diners lh-1 mg-l-5"><i class="fab fa-cc-diners-club"></i></div>
</div>

var cleave = new Cleave('#inputCreditCard', {
  creditCard: true,
  onCreditCardTypeChanged: function (type) {
    console.log(type)
    var card = $('#creditCardType').find('.'+type);

    if(card.length) {
      card.addClass('tx-primary');
      card.siblings().removeClass('tx-primary');
    } else {
      $('#creditCardType span').removeClass('tx-primary');
    }
  }
});

Phone Number Formatting

Mask an input element to provide users or a guide for entering phone number.

US (+1)

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">US (+1)</span>
  </div>
  <input id="inputPhoneNumber" type="text" class="form-control" placeholder="Enter phone number">
</div>

var cleave = new Cleave('#inputPhoneNumber', {
  phone: true,
  phoneRegionCode: 'US'
});

Date Formatting

Mask an input element to provide users or a guide for entering date.

<input id="inputDate" type="text" class="form-control" placeholder="YYYY/MM/DD">
<input id="inputDate2" type="text" class="form-control mg-t-10" placeholder="MM/YY">

var cleaveC = new Cleave('#inputDate', {
  date: true,
  datePattern: ['Y', 'm', 'd']
});

var cleaveD = new Cleave('#inputDate2', {
  date: true,
  datePattern: ['m', 'y']
});

Time Formatting

Mask an input element to provide users or a guide for entering time..

<input id="inputTime" type="text" class="form-control" placeholder="hh:mm:ss">
<input id="inputTime2" type="text" class="form-control mg-t-10" placeholder="hh:mm">

var cleaveE = new Cleave('#inputTime', {
  time: true,
  timePattern: ['h', 'm', 's']
});

var cleaveF = new Cleave('#inputTime2', {
  time: true,
  timePattern: ['h', 'm']
});

Numeral Formatting

Mask an input element to provide users or a guide for entering numerals.

<input id="inputNumeral" type="text" class="form-control" placeholder="Enter numeral">

var cleaveG = new Cleave('#inputNumeral', {
  numeral: true,
  numeralThousandsGroupStyle: 'thousand'
});

Custom Options

Some example of custom mask option to an input element.

<input id="inputBlocks" type="text" class="form-control" placeholder="0000 000 000 0000">

var cleaveH = new Cleave('#inputBlocks', {
  blocks: [4, 3, 3, 4],
  uppercase: true
});

var cleaveI = new Cleave('#inputBlocks2', {
  delimiters: ['+', '+', '-'],
  blocks: [3, 3, 4, 2]
});

var cleaveJ = new Cleave('#inputBlocks3', {
  prefix: '+63',
  uppercase: true
});

Components