Cleave.js

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

Features

Credit card number formatting
Phone number formatting (i18n js lib separated for each country to reduce size)
Date formatting
Numeral formatting
Custom delimiter, prefix and blocks pattern
CommonJS / AMD mode
ReactJS component

The idea is to provide an easy way to increase input field readability by formatting your typed data. By using this 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 validation or mask library, you should still sanitize and validate your data in backend.

Installation

npm

npm install --save cleave.js

bower

bower install --save cleave.js

old school

Grab file from dist directory

Usage

Simply include

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

cleave-phone.{country}.js addon is only required when phone shortcut mode is enabled. See more in documentation: phone lib addon section

Then have a text field

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

Now in your JavaScript

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

More examples: the demo page

CommonJS

var Cleave = require('cleave.js');
require('cleave.js/dist/addons/cleave-phone.{country}');

var cleave = new Cleave(...)

We don't want to register any transfer tool as dependencies, so for Browserify users, please also run this:

npm install --save babelify browserify-shim

AMD

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

ReactJS component usage

import React from 'react';
import ReactDOM from 'react-dom';

import Cleave from 'cleave.js/react';

Then in JSX:

class MyComponent extends React.Component {

    constructor(props, context) {
        super(props, context);
        this.onCreditCardChange = this.onCreditCardChange.bind(this);
    }
    
    onCreditCardChange(event) {
        // formatted pretty value
        console.log(event.target.value);
        
        // raw value
        console.log(event.target.rawValue);
    }

    render() {
        return (
            <Cleave placeholder="Enter your credit card number"
                options={{creditCard: true}}
                onChange={this.onCreditCardChange} />
        );
    }
}