Cleave.js

Cleave.js has a simple purpose: to help you format input text content automatically.

The idea is to provide an easy way to increase readability when you are typing. By using the library, you won't need to write any mind-blowing regular expressions or mask patterns to format input text.

However, this isn't meant to replace any form validation or mask library, you should still sanitize and validate your data in backend.

tl;dr the demo page

Features

• Credit card number formatting
• Phone number formatting (lib separated by countries to reduce size)
• Date formatting
• Numeral formatting
• Customize delimiter, prefix and blocks pattern
• CommonJS / AMD support

Installation

npm

npm install --save cleave.js

bower

bower install --save cleave.js

throwback

Grab the file from dist folder

Usage

Simply include

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

cleave-phone.js is only required when phone shortcut mode is enabled. See more in documentation: phone lib usage section

Then have a text field

<input class="input-phone" type="text"/>

Now in your JavaScript

var cleave = new Cleave('.input-phone', {
    phone:      true,
    regionCode: '{country}'
});

More examples: the demo page

CommonJS

var Cleave = require('cleave.js');

var cleave = new Cleave(...)

AMD

require(['dist/cleave.min', 'dist/plugin/cleave-phone.{country}'], function (Cleave) {
    var cleave = new Cleave(...)
});

Documentation

• JavaScript API
  • Constructor
  • Options
  • Public methods
• Phone lib usage

Building & Running tests

npm install

Build assets

gulp build

Run unit tests and js code validation

gulp mocha && gulp jshint

References

• Payment credit card number IIN https://en.wikipedia.org/wiki/Payment_card_number#Issuer_identification_number_.28IIN.29
• Google phone numbers formatting https://github.com/googlei18n/libphonenumber
• Decimal mark and thousands separating style https://en.wikipedia.org/wiki/Decimal_mark#Examples_of_use

Licence

Cleave.js is licensed under the Apache License Version 2.0

• Google libphonenumber is included under its Apache License Version 2.0