Flexible Form Input Text Format Library – Cleave.js

Preview:

Description:

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
instance.getRawValue()
// Sets raw value, it will then apply formatting automatically
instance.setRawValue(value)
// Gets formatted pretty value
instance.getFormattedValue()
// Gets ISO format date value, this only works for date input type.
instance.getISOFormatDate()
// Destroy
instance.destroy()
// Sets / Changes country region code.
instance.setPhoneRegionCode(regionCode)

Changelog:

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