Input Masks

Cleave.js has a simple purpose: to help you format input text content automatically. Read the Official Cleave.js Websitefor 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