Flexible Form Input Text Format Library – Cleave.js

Category: Form , Javascript , Recommended | May 21, 2020
Views Total:1,091 views
Official Page:Go to website
Last Update:May 21, 2020


Flexible Form Input Text Format Library – Cleave.js


Cleave.js is a simple lightweight JavaScript library used to restrict and format input text to a specific pattern (credit cards, phone numbers, dates, etc).

AMD and commonJS are supported. Also provides as a React component.

Basic usage:

You first have to include the Cleave.js library on the webpage.

<script src="cleave.min.js"></script>

Include an addon of your choice as this:

<script src="addons/cleave-phone.{country}.js"></script>

Create a new Cleave object, specify the target input field and pass in the options as follows:

new Cleave('.input', {
    // options here

All possible options.

// credit card
creditCard: true,
creditCardStrictMode: true,
onCreditCardTypeChanged: function (type) {}, // type = amex mastercard visa diners discover jcb dankort instapayment uatp mir unionPay
// phone
phone: true,
phoneRegionCode: 'US',
// date
date: true,
dateMin: '2000-01-01',
dateMax: '2099-12-31',
datePattern: ['d', 'm', 'Y'],
// time
time: true,
timePattern: ['h', 'm', 's'],
timeFormat: '24' // or '12'
// numeral
numeral: true,
numeralDecimalScale: 2,
numeralDecimalMark: '.',
numeralThousandsGroupStyle: 'thousand',
numeralIntegerScale: 4,
numeralPositiveOnly: false,
stripLeadingZeroes: true,
signBeforePrefix: 'false', // e.g. '$'
tailPrefix: false,
// others
numericOnly: true,
uppercase: true,
lowercase: true,
prefix: '',
delimiter: '',
blocks: [], // an Array value indicates the groups to format the input value
delimiters: [],
delimiterlazyshow: true,
noImmediatePrefix: false,
rawValueTrimPrefix: false,
swapHiddenInput: false, // swaps the input field to a hidden field
onValueChanged: function(){}

API methods.

// Gets raw value without any format pattern or delimiter
// Sets raw value, it will then apply formatting automatically
// Gets formatted pretty value
// Gets ISO format date value, this only works for date input type.
// Destroy
// Sets / Changes country region code.


v1.6.0 (05/21/2020)

  • Fix mobile keyboard issue and noImmediatePrefix broken issue

v1.5.3 (07/16/2019)

  • Fix noImmediatePrefix broken issue

v1.4.10 (03/20/2019)

  • Add document and throw warning when multiple elements matched the selector

You Might Be Interested In:

Leave a Reply