❗ This repository is no longer maintained and may contain vulnerable code. If you wish to revive it, please request a security review. |
---|
Cleave.js has a simple purpose: to help you format input text content automatically.
- 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
- AngularJS directive (1.x)
TL;DR the demo page
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.
npm install --save cleave.js
bower install --save cleave.js
Grab file from dist directory
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
var Cleave = require('cleave.js');
require('cleave.js/dist/addons/cleave-phone.{country}');
var cleave = new Cleave(...)
For Browserify users, please also run this:
npm install --save babelify browserify-shim
And add this empty browserify-shim
config to your package.json:
"browserify-shim": {
}
require(['cleave.js/dist/cleave.min', 'cleave.js/dist/addons/cleave-phone.{country}'], function (Cleave) {
var cleave = new Cleave(...)
});
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} />
);
}
}
As you can see, here you simply use <Cleave/>
as a normal <input/>
field
- Attach HTML
<input/>
attributes - Pass in the custom
options
prop - Add ReactJS
onChange
event listener
Usage for Webpack
, Browserify
and more in documentation: ReactJS component usage
First include the directive module:
<script src="cleave.js/dist/cleave-angular.min.js"></script>
<script src="cleave.js/dist/addons/cleave-phone.{country}.js"></script>
And in your model:
angular.module('app', ['cleave.js'])
.controller('AppController', function($scope) {
$scope.onCreditCardTypeChanged = function(type) {
$scope.model.creditCardType = type;
};
$scope.model = {
rawValue: ''
};
$scope.options = {
creditCard: {
creditCard: true,
onCreditCardTypeChanged: $scope.onCreditCardTypeChanged
}
};
});
Then easily you can apply cleave
directive to input
field:
<div ng-controller="AppController">
<input ng-model="model.rawValue" ng-whatever="..." type="text" placeholder="Enter credit card number"
cleave="options.creditCard"/>
</div>
More usage in documentation: Angular directive usage
npm install
Build assets
gulp build
Run unit tests and lint
gulp mocha && gulp eslint
- ReactJS component
- Add credit card type detection callback
- Mocha unit tests for formatter
- Fix the classic cursor jumping issue
- AngularJS directive (1.x)
- PhantomJS / Jest browser tests
For contributors, we have a not in the plan list you may concern.
- Bugs / Suggestions: open an issue
- Twitter: @rison
- 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
Cleave.js is licensed under the Apache License Version 2.0
- Google libphonenumber is included under its Apache License Version 2.0