JavaScript format input while typing – Cleave.js

JavaScript format input while typing in an easy way.

Format your inputs content when typing – Cleave.js

Cleave.js has a simple purpose: to help you format input text content automatically. We don’t have to worry about handling it manually anymore. The idea is to provide an easy way to increase input field readability by formatting typed data. However, this isn’t meant to replace any validation or mask library. For that we still should still sanitize and validate data in our backend.

Features

– Phone number formatting (i18n js lib separated for each country to reduce size)

– Credit card number formatting

– Date formatting

– Numeral formatting

– Custom delimiter, prefix and blocks pattern

– CommonJS / AMD mode

– ReactJS component

– AngularJS directive

JavaScript format input while typing
JavaScript format input while typing

Setup

npm install --save cleave.js

Sample

We need to have included (or imported) the scripts, as well place data input in our document.

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

...

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

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

That’s it. There are also ways to use it in React JS, Angular, and jQuery.

License: Apache License Version 2.0

Homepage, demos, docs

https://nosir.github.io/cleave.js

GitHub

https://github.com/nosir/cleave.js

See also

jQuery Novelist – textarea and input character limit plugin

Choices.js – nice select inputs UI

Awesome Bootstrap checkboxes and radios

Date and Time operations in JavaScript – date-fns

jQuery fancy input box with amazing CSS3 effects

Tab Complete – jQuery autocomplete for HTML inputs

Enjoy!