Flexible Form Input Text Format Library – Cleave.js

Category: Form , Javascript , Recommended | March 20, 2019
Author: nosir
Views Total: 3,331
Official Page: Go to website
Last Update: March 20, 2019
License: MIT


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 () {},

// phone
phone: true,
phoneRegionCode: 'AU',

// date
date: true,
datePattern: ['d', 'm', 'Y'],

// time
time: true,
timePattern: ['h', 'm', 's'],

// numeral
numeral: true,
numeralDecimalScale: 2,
numeralDecimalMark: '.',
numeralThousandsGroupStyle: 'thousand',
numeralIntegerScale: 4,
numeralPositiveOnly: false,
stripLeadingZeroes: true,

// others
numericOnly: true,
uppercase: true,
lowercase: true,
prefix : '',
delimiter : '',
blocks: [],
delimiters: [],
delimiterlazyshow: true,
noImmediatePrefix: false,
rawValueTrimPrefix: false,
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.4.10 (03/20/2019)

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

You Might Be Interested In:

Leave a Reply