Repository files navigation

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)
• ES Module

TL;DRthe 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

cleave.js is available onjsDelivr and oncdnjs.com

Grab file fromdist directory

Simply include

<scriptsrc="cleave.min.js"></script><scriptsrc="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

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

Now in your JavaScript

varcleave=newCleave('.input-phone',{phone:true,phoneRegionCode:'{country}'});

.input-element here is a unique DOM element. If you want to apply Cleave for multiple elements, you need to give different CSS selectors and apply to each of them, effectively, you might want to create individual instance by a loop, e.g.loop solution

More examples:the demo page

varCleave=require('cleave.js');require('cleave.js/dist/addons/cleave-phone.{country}');varcleave=newCleave(...)

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

// Rollup, WebPackimportCleavefrom'cleave.js';varcleave=newCleave(...)// BrowserimportCleavefrom'node_modules/cleave.js/dist/cleave-esm.min.js';varcleave=newCleave(...)

Types are contributed by the community and are available vianpm install --save-dev @types/cleave.js. Once installed, you can import Cleave like the following:

importCleave= require('cleave.js');

Types for the React-component are also available and can be imported in the same way.

importCleave= require('cleave.js/react');

importReactfrom'react';importReactDOMfrom'react-dom';importCleavefrom'cleave.js/react';

Then in JSX:

classMyComponentextendsReact.Component{constructor(props,context){super(props,context);this.onCreditCardChange=this.onCreditCardChange.bind(this);this.onCreditCardFocus=this.onCreditCardFocus.bind(this);}onCreditCardChange(event){// formatted pretty valueconsole.log(event.target.value);// raw valueconsole.log(event.target.rawValue);}onCreditCardFocus(event){// update some state}render(){return(<Cleaveplaceholder="Enter your credit card number"options={{creditCard:true}}onFocus={this.onCreditCardFocus}onChange={this.onCreditCardChange}/>);}}

As you can see, here you simply use<Cleave/> as a normal<input/> field

• Attach HTML<input/> attributes
• Pass in the customoptions prop
• Add ReactJSonChange event listener

Advanced usage:

• How to pass default value
• How to get ref of cleave instance and call methods
• How to update raw value
• How to get ref of the input field
• How to use it with redux form

Usage forWebpack,Browserify and more in documentation:ReactJS component usage

First include the directive module:

<scriptsrc="cleave.js/dist/cleave-angular.min.js"></script><scriptsrc="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 applycleave directive toinput field:

<divng-controller="AppController"><inputng-model="model.rawValue"ng-whatever="..."type="text"placeholder="Enter credit card number"cleave="options.creditCard"/></div>

More usage in documentation:Angular directive usage

While this package does not have an official support for use in VueJs. This can be done in few simple steps.Please checkhere

Please checkhere

• Plain JSFiddle (Basic usage)
• Plain JSFiddle (More examples)
• React JSFiddle
• Angular JSFiddle

• JavaScript API
  • Constructor
  • Options
  • Public methods
• Phone lib addon
• ReactJS component usage
• AngularJS directive usage

npm install

Build assets

gulp build

Run tests

gulptest

Lint

gulp eslint

Publish (build, tests & lint)

gulp publish

For contributors, please rungulp publish to ensure your PR passes tests and lint, also we have anot in the plan list you may concern.

• Twitter:@rison

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

Cleave.js is licensed under theApache License Version 2.0

• Googlelibphonenumber is included under itsApache License Version 2.0