Cleave.js - 自动格式化 input 文本输入框内容的 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 port

TL;DR the demo page

Why?

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

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

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');
require('cleave.js/dist/addons/cleave-phone.{country}');

var cleave = new Cleave(...)

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 {
    onCreditCardChange(event) {
        // formatted pretty value
        console.log(event.target.value);

        // raw value
        console.log(event.target.rawValue);
    }

    render() {
        return (
            
        );
    }
}

As you can see, here you simply use as a normal field

• Attach HTML attributes
• Pass in the custom options prop
• Add ReactJS onChange event listener

See more in documentation: ReactJS component usage section

Playground

• Plain JSFiddle
• React JSFiddle
• Demo page

Documentation

Building & Running tests

Build assets

Run unit tests and lint

gulp mocha && gulp eslint

Todo

• ReactJS component port
• Add credit card type detection callback
• Mocha unit tests for formatter
• AngularJS component port (WIP...)
• PhantomJS / Jest browser tests

Get in touch

• Bugs / Suggestions: open an issue
• Twitter: @rison

References

• Payment credit card number IIN en.wikipedia.org/wiki/Paymen…
• Google phone numbers formatting github.com/googlei18n/…
• Decimal mark and thousands separating style en.wikipedia.org/wiki/Decima…

Licence

Cleave.js is licensed under the Apache License Version 2.0

• Google libphonenumber is included under its Apache License Version 2.0