Cleave.js是一個幫助表單實現各種復雜實時格式化顯示的工具庫，可以說Cleave.js讓表單的輸入變得更加的高逼格，能實現很多復雜的表單格式化顯示，簡而言之就是針對 <input> 標簽按照諸如千分位、電話號碼等風格的特定顯示！通過使用這個庫，您不需要編寫任何正則表達式來控制輸入文本的格式。然而，這并不意味著取代任何驗證或掩碼庫，你仍應在后端驗證數據或者在前端對輸入的內容進行校驗。

支持的格式：信用卡號碼、電話號碼格式（支持各個國家）、日期格式、數字格式、自定義分隔符，前綴和塊模式等

效果：

信用卡

var cleave = new Cleave('.input-element', {creditCard: true,onCreditCardTypeChanged: function (type) {// update UI ...} });

日期

var cleave = new Cleave('.input-element', {date: true,delimiter: '-',datePattern: ['Y', 'm', 'd'] });var cleave = new Cleave('.input-element', {date: true,datePattern: ['m', 'y'] });

時間

var cleave = new Cleave('.input-element', {time: true,timePattern: ['h', 'm', 's'] });var cleave = new Cleave('.input-element', {time: true,timePattern: ['h', 'm'] });

貨幣（千分位，萬）

var cleave = new Cleave('.input-element', {numeral: true,numeralThousandsGroupStyle: 'thousand'//可改為'wan' });

自定義

var cleave = new Cleave('.input-element', {blocks: [4, 3, 3, 4],uppercase: true });var cleave = new Cleave('.input-element', {delimiter: '·',blocks: [3, 3, 3],uppercase: true });var cleave = new Cleave('.input-element', {delimiters: ['.', '.', '-'],blocks: [3, 3, 3, 2],uppercase: true });var cleave = new Cleave('.input-element', {prefix: 'PREFIX',delimiter: '-',blocks: [6, 4, 4, 4],uppercase: true });

使用

支持在普通JS和React、Angular中使用，也支持CommonJS、AMD、ES Module、TypeScript。也有如何支持Vue.js的方法文檔。

JavaScript

創建input輸入框

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

引入下載好的cleave.js文件

<script src="./js/cleave.js"></script>

或者引入CDN鏈接文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js"></script>

在JavaScript中引入需要的實例

var cleave = new Cleave('.input-phone', {date: true,delimiter: '-',datePattern: ['Y', 'm', 'd'] });

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

可通過npm install——save-dev @types/cleave.js獲得。安裝完成后，你可以像下面這樣導入Cleave:

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

react組件的類型也可用，并且可以以相同的方式導入

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

ReactJS

import React from 'react'; import ReactDOM from 'react-dom'; import Cleave from 'cleave.js/react';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) {// 格式化后的數據console.log(event.target.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} />);} } //如您所見，這里您只需使用<Cleave/>作為普通的<input/>字段

VueJs

全局配置：

import Vue from 'vue' import Cleave from 'cleave.js';Vue.directive('cleave', {inserted: (el, binding) => {el.cleave = new Cleave(el, binding.value || {})},update: (el) => {const event = new Event('input', {bubbles: true});setTimeout(function () {el.value = el.cleave.properties.resultel.dispatchEvent(event)}, 100);} })

配置本地指令：

import Cleave from 'cleave.js'; export default {...directives: {cleave: {inserted: (el, binding) => {el.cleave = new Cleave(el, binding.value || {})},update: (el) => {const event = new Event('input', {bubbles: true});setTimeout(function () {el.value = el.cleave.properties.resultel.dispatchEvent(event)}, 100);}}}... }

在html中使用：

<input v-model="ccNumber" class="input-element" v-cleave="{creditCard: true, onCreditCardTypeChanged : cardChanged}"> <input name="text" v-model="ccMonth" v-cleave="{date: true,datePattern: ['m']}"> <input type="number" v-model="ccv" v-cleave="{numeral: true,numeralPositiveOnly: true,numeralIntegerScale: 3}">

寫在最后

更多相關內容可以去到https://nosir.github.io/cleave.js/

總結

以上是生活随笔為你收集整理的js实现input输入框内容自动格式化工具-Cleave.js使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。