Skip to content
This repository has been archived by the owner on Nov 15, 2022. It is now read-only.
/ cleave.js Public archive
forked from nosir/cleave.js

Format input text content when you are typing

License

Notifications You must be signed in to change notification settings

myhelix/cleave.js

This branch is 9 commits ahead of, 285 commits behind nosir/cleave.js:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

e339729 · Nov 15, 2022
Sep 15, 2016
Sep 15, 2016
Sep 15, 2016
Sep 15, 2016
Aug 16, 2016
Jul 7, 2016
Aug 16, 2016
Jun 5, 2016
Jul 11, 2016
Jun 25, 2016
Nov 15, 2022
Sep 15, 2016
Jun 25, 2016
Jun 5, 2016
Sep 15, 2016
Jun 19, 2016

Repository files navigation

❗ This repository is no longer maintained and may contain vulnerable code. If you wish to revive it, please request a security review.

Cleave.js

Travis Codacy branch grade npm version Bower version Documents

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

bower

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

More examples: the demo page

CommonJS

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": {
}

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 {

    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

AngularJS directive 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

Playground

Documentation

Building & Running tests

npm install

Build assets

gulp build

Run unit tests and lint

gulp mocha && gulp eslint

Todo

  • 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.

Get in touch

References

Licence

Cleave.js is licensed under the Apache License Version 2.0

Analytics

About

Format input text content when you are typing

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%