cleave.js README

The project's README from github.com/nosir/cleave.js. As one markdown file: README.md.

⚠️ Deprecated Message

Message: Kindly note that this library has been deprecated. If you are still interested in using Cleave, please explore the new version available at: cleave-zen.

And this is the message from author: https://github.com/nosir/cleave.js/issues/723

Cleave.js

Travis Codacy Badge npm version npm downloads Documents

Cleave.js has a simple purpose: to help you format input text content automatically.

Features

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

CDN

cleave.js is available on jsDelivr and on cdnjs.com

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, effectively, you might want to create individual instance by a loop, e.g. loop solution

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

ES Module

// Rollup, WebPack
import Cleave from 'cleave.js';
var cleave = new Cleave(...)

// Browser
import Cleave from 'node_modules/cleave.js/dist/cleave-esm.min.js';
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')

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)
    this.onCreditCardFocus = this.onCreditCardFocus.bind(this)
  }

  onCreditCardChange(event) {
    // formatted pretty value
    console.log(event.target.value)

    // raw value
    console.log(event.target.rawValue)
  }

  onCreditCardFocus(event) {
    // update some state
  }

  render() {
    return (
      <Cleave
        placeholder='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

Advanced usage:

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

Use in VueJs

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

jQuery fn usage

Please check here

Playground

Documentation

Run tasks

npm install

Build assets

gulp build

Run tests

gulp test

Lint

gulp eslint

Publish (build, tests & lint)

gulp publish

For contributors, please run gulp publish to ensure your PR passes tests and lint, also 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

cleave.js (nosir/cleave.js)

Searching Database…

17.8K ·GitHub
Cleave.js
Что это такое?Cleave.js — это JavaScript-библиотека, которая автоматически форматирует текст по мере набора в поле ввода, например номера банковских карт, номера телефонов, даты и числа.
Это самостоятельная библиотека или для неё нужен фреймворк?Это самостоятельная JavaScript-библиотека с необязательными обёртками: компонентом для ReactJS, директивой для AngularJS (1.x), а также использованием с VueJs и jQuery, которое поддерживается сообществом.
Как добавить её в проект?Установите через npm, подключите с CDN jsDelivr или cdnjs либо возьмите файл напрямую из папки dist, а затем привяжите его к элементу input в вашем JavaScript-коде.
Нужны ли дополнительные файлы для форматирования номеров телефонов?Да, для форматирования телефонов нужен отдельный файл-дополнение для каждой страны, cleave-phone.{country}.js, так как библиотека для работы с телефонами (i18n) разбита по странам, чтобы уменьшить размер сборки.
Проект ещё поддерживается?Нет, Cleave.js официально объявлен устаревшим его автором, который рекомендует перейти на более новую библиотеку «cleave-zen».
Заменяет ли она проверку вводимых данных на моём сервере?Нет, она только улучшает читаемость вводимого текста и не предназначена для замены проверки или маскирования данных, которые всё равно нужно делать на стороне сервера.
Какие виды форматирования поддерживаются из коробки?Поддерживаются форматирование номеров банковских карт, номеров телефонов, дат и чисел, а также пользовательские шаблоны с разделителями, префиксами и блоками.
Доступны ли типы TypeScript?Да, типы, созданные сообществом, доступны через «@types/cleave.js», включая типы для компонента React.
Можно ли использовать её сразу с несколькими полями ввода?Да, но для каждого поля нужны свои CSS-селекторы, и для каждого из них следует создать отдельный экземпляр Cleave, обычно в цикле.
What are similar projects?redux-form, vee-validate, react-jsonschema-form, formik, handsontable, validator.js, selectize.js, validator
Which topics is it in?form-validation, form, input, validation, i18n, deprecated, ui, react, npm, frontend, apache-2.0, library
Creator
nosir
Size
3 MB
Stars
17.8K
Updated
CommitNov 25Releasev1.6.0May 19
Age
10y
Commits · 90 Days