Cleave.js

Format input text content when you are typing… http://nosir.github.io/cleave.js

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
  • AngularJS directive (1.x)

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

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}'
});
.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

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(...)
});

TypeScript

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

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

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

import Cleave = require('cleave.js/react');

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares