[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3242":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":23,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},3242,"cleave.js","nosir\u002Fcleave.js","nosir","Format input text content when you are typing...","http:\u002F\u002Fnosir.github.io\u002Fcleave.js",null,"JavaScript",17869,1581,177,187,0,4,6,44.6,"Apache License 2.0",false,"master",true,[25,26,27,28,29],"credit-card","creditcard","input","input-mask","telephone-number","2026-06-12 02:00:47","# ⚠️ Deprecated Message\n\n**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](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave-zen).\n\nAnd this is the message from author: https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fissues\u002F723\n\n# Cleave.js\n\n[![Travis](https:\u002F\u002Fimg.shields.io\u002Ftravis\u002Fnosir\u002Fcleave.js.svg?maxAge=2592000)](https:\u002F\u002Ftravis-ci.org\u002Fnosir\u002Fcleave.js)\n[![Codacy Badge](https:\u002F\u002Fapi.codacy.com\u002Fproject\u002Fbadge\u002FGrade\u002Fb1c0b0da42fa418f887076a3f7352aea)](https:\u002F\u002Fwww.codacy.com\u002Fapp\u002Fnosir\u002Fcleave-js?utm_source=github.com&utm_medium=referral&utm_content=nosir\u002Fcleave.js&utm_campaign=badger)\n[![npm version](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002Fcleave.js.svg)](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002Fcleave.js)\n[![npm downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fcleave.js.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcleave.js)\n[![Documents](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fdocuments-check-3362c2.svg)](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Fdoc.md)\n\nCleave.js has a simple purpose: to help you format input text content automatically.\n\n## Features\n\n- Credit card number formatting\n- Phone number formatting (i18n js lib separated for each country to reduce size)\n- Date formatting\n- Numeral formatting\n- Custom delimiter, prefix and blocks pattern\n- CommonJS \u002F AMD mode\n- ReactJS component\n- AngularJS directive (1.x)\n- ES Module\n\n**TL;DR** [the demo page](http:\u002F\u002Fnosir.github.io\u002Fcleave.js\u002F)\n\n## Why?\n\nThe 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.\n\nHowever, this isn't meant to replace any validation or mask library, you should still sanitize and validate your data in backend.\n\n## Installation\n\n#### npm\n\n```bash\nnpm install --save cleave.js\n```\n\n#### CDN\n\ncleave.js is available on [jsDelivr](https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002Fcleave.js) and on [cdnjs.com](https:\u002F\u002Fcdnjs.com\u002Flibraries\u002Fcleave.js)\n\n#### old school\n\nGrab file from [dist](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Ftree\u002Fmaster\u002Fdist) directory\n\n## Usage\n\nSimply include\n\n```html\n\u003Cscript src=\"cleave.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"cleave-phone.{country}.js\">\u003C\u002Fscript>\n```\n\n> `cleave-phone.{country}.js` addon is only required when phone shortcut mode is enabled. See more in documentation: [phone lib addon](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Fphone-lib-addon.md) section\n\nThen have a text field\n\n```html\n\u003Cinput class=\"input-phone\" type=\"text\" \u002F>\n```\n\nNow in your JavaScript\n\n```js\nvar cleave = new Cleave('.input-phone', {\n  phone: true,\n  phoneRegionCode: '{country}',\n})\n```\n\n> `.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](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fissues\u002F138#issuecomment-268024840)\n\nMore examples: [the demo page](http:\u002F\u002Fnosir.github.io\u002Fcleave.js\u002F)\n\n#### CommonJS\n\n```js\nvar Cleave = require('cleave.js');\nrequire('cleave.js\u002Fdist\u002Faddons\u002Fcleave-phone.{country}');\n\nvar cleave = new Cleave(...)\n```\n\n#### AMD\n\n```js\nrequire(['cleave.js\u002Fdist\u002Fcleave.min', 'cleave.js\u002Fdist\u002Faddons\u002Fcleave-phone.{country}'], function (Cleave) {\n    var cleave = new Cleave(...)\n});\n```\n\n#### ES Module\n\n```js\n\u002F\u002F Rollup, WebPack\nimport Cleave from 'cleave.js';\nvar cleave = new Cleave(...)\n\n\u002F\u002F Browser\nimport Cleave from 'node_modules\u002Fcleave.js\u002Fdist\u002Fcleave-esm.min.js';\nvar cleave = new Cleave(...)\n```\n\n#### TypeScript\n\nTypes are contributed by the community and are available via `npm install --save-dev @types\u002Fcleave.js`. Once installed, you can import Cleave like the following:\n\n```ts\nimport Cleave = require('cleave.js')\n```\n\nTypes for the React-component are also available and can be imported in the same way.\n\n```ts\nimport Cleave = require('cleave.js\u002Freact')\n```\n\n## ReactJS component usage\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nimport Cleave from 'cleave.js\u002Freact'\n```\n\nThen in JSX:\n\n```js\nclass MyComponent extends React.Component {\n  constructor(props, context) {\n    super(props, context)\n    this.onCreditCardChange = this.onCreditCardChange.bind(this)\n    this.onCreditCardFocus = this.onCreditCardFocus.bind(this)\n  }\n\n  onCreditCardChange(event) {\n    \u002F\u002F formatted pretty value\n    console.log(event.target.value)\n\n    \u002F\u002F raw value\n    console.log(event.target.rawValue)\n  }\n\n  onCreditCardFocus(event) {\n    \u002F\u002F update some state\n  }\n\n  render() {\n    return (\n      \u003CCleave\n        placeholder='Enter your credit card number'\n        options={{ creditCard: true }}\n        onFocus={this.onCreditCardFocus}\n        onChange={this.onCreditCardChange}\n      \u002F>\n    )\n  }\n}\n```\n\nAs you can see, here you simply use `\u003CCleave\u002F>` as a normal `\u003Cinput\u002F>` field\n\n- Attach HTML `\u003Cinput\u002F>` attributes\n- Pass in the custom `options` prop\n- Add ReactJS `onChange` event listener\n\nAdvanced usage:\n\n- [How to pass default value](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Freactjs-component-usage.md#how-to-pass-default-value)\n- [How to get ref of cleave instance and call methods](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Freactjs-component-usage.md#how-to-call-public-methods)\n- [How to update raw value](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Freactjs-component-usage.md#how-to-update-raw-value)\n- [How to get ref of the input field](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Freactjs-component-usage.md#how-to-get-ref-of-the-input-field)\n- [How to use it with redux form](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Freactjs-component-usage.md#how-to-use-it-with-redux-form)\n\nUsage for `Webpack`, `Browserify` and more in documentation: [ReactJS component usage](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Freactjs-component-usage.md)\n\n## AngularJS directive usage\n\nFirst include the directive module:\n\n```html\n\u003Cscript src=\"cleave.js\u002Fdist\u002Fcleave-angular.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"cleave.js\u002Fdist\u002Faddons\u002Fcleave-phone.{country}.js\">\u003C\u002Fscript>\n```\n\nAnd in your model:\n\n```js\nangular\n  .module('app', ['cleave.js'])\n\n  .controller('AppController', function ($scope) {\n    $scope.onCreditCardTypeChanged = function (type) {\n      $scope.model.creditCardType = type\n    }\n\n    $scope.model = {\n      rawValue: '',\n    }\n\n    $scope.options = {\n      creditCard: {\n        creditCard: true,\n        onCreditCardTypeChanged: $scope.onCreditCardTypeChanged,\n      },\n    }\n  })\n```\n\nThen easily you can apply `cleave` directive to `input` field:\n\n```html\n\u003Cdiv ng-controller=\"AppController\">\n  \u003Cinput\n    ng-model=\"model.rawValue\"\n    ng-whatever=\"...\"\n    type=\"text\"\n    placeholder=\"Enter credit card number\"\n    cleave=\"options.creditCard\"\n  \u002F>\n\u003C\u002Fdiv>\n```\n\nMore usage in documentation: [Angular directive usage](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Fangularjs-directive-usage.md)\n\n## Use in VueJs\n\nWhile this package does not have an official support for use in VueJs. This can be done in few simple steps.\nPlease check [here](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Fvue.md)\n\n## jQuery fn usage\n\nPlease check [here](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fissues\u002F341)\n\n## Playground\n\n- [Plain JSFiddle (Basic usage)](https:\u002F\u002Fjsfiddle.net\u002Fnosir\u002Fkbaxx64s\u002F)\n- [Plain JSFiddle (More examples)](https:\u002F\u002Fjsfiddle.net\u002Fnosir\u002FaLnhdf3z\u002F)\n- [React JSFiddle](https:\u002F\u002Fjsfiddle.net\u002Fnosir\u002FgLLsrxxf\u002F)\n- [Angular JSFiddle](https:\u002F\u002Fjsfiddle.net\u002Fnosir\u002Fq58sh22t\u002F)\n\n## Documentation\n\n- [JavaScript API](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Fjs-api.md)\n  - [Constructor](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Fconstructor.md)\n  - [Options](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Foptions.md)\n  - [Public methods](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Fpublic-methods.md)\n- [Phone lib addon](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Fphone-lib-addon.md)\n- [ReactJS component usage](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Freactjs-component-usage.md)\n- [AngularJS directive usage](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Fangularjs-directive-usage.md)\n\n## Run tasks\n\n```bash\nnpm install\n```\n\nBuild assets\n\n```bash\ngulp build\n```\n\nRun tests\n\n```bash\ngulp test\n```\n\nLint\n\n```bash\ngulp eslint\n```\n\nPublish (build, tests & lint)\n\n```bash\ngulp publish\n```\n\n> For contributors, please run `gulp publish` to ensure your PR passes tests and lint, also we have a [not in the plan](https:\u002F\u002Fgithub.com\u002Fnosir\u002Fcleave.js\u002Fblob\u002Fmaster\u002Fdoc\u002Fnot-in-the-plan.md) list you may concern.\n\n## Get in touch\n\n- Twitter: [@rison](https:\u002F\u002Ftwitter.com\u002Frison)\n\n## References\n\n- Payment credit card number IIN https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FPayment_card_number#Issuer_identification_number_.28IIN.29\n- Google phone numbers formatting https:\u002F\u002Fgithub.com\u002Fgooglei18n\u002Flibphonenumber\n- Decimal mark and thousands separating style https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FDecimal_mark#Examples_of_use\n\n## Licence\n\nCleave.js is licensed under the [Apache License Version 2.0](http:\u002F\u002Fwww.apache.org\u002Flicenses\u002FLICENSE-2.0)\n\n- Google [libphonenumber](https:\u002F\u002Fgithub.com\u002Fgooglei18n\u002Flibphonenumber) is included under its [Apache License Version 2.0](http:\u002F\u002Fwww.apache.org\u002Flicenses\u002FLICENSE-2.0)\n\n[![Analytics](https:\u002F\u002Fga-beacon.appspot.com\u002FUA-79828599-1\u002Fcleave.js?pixel)](https:\u002F\u002Fgithub.com\u002Figrigorik\u002Fga-beacon)\n","Cleave.js 是一个用于在用户输入时自动格式化文本内容的JavaScript库。其核心功能包括信用卡号、电话号码、日期以及数字的格式化，支持自定义分隔符、前缀和块模式，并且兼容CommonJS、AMD模式及ReactJS组件和AngularJS指令（1.x）。该库适用于需要提高表单字段可读性的场景，如电子商务网站中的支付信息填写或国际化的联系方式收集等。尽管Clove.js已不再维护并推荐使用新版本cleave-zen，但其设计理念旨在简化开发者的工作流程，避免编写复杂的正则表达式来处理常见的输入格式问题。",2,"2026-06-11 02:53:03","top_language"]