1111111111111111 xxxxxx

Cleave.js 鍵入時格式化<?input?/>內容

信用卡號碼格式

明確

• 美國運通：從34/37開始

  34?????????????

• 簽證：從4開始

  4???????????????

• 大來俱樂部：從300-305 / 309開始......

  300???????????

• 萬事達卡：從51-55 / 22-27開始

  51??????????????

• JCB：從35/2131/1800開始

  35??????????????

• 發現：從6011 | 65 | 644-649開始

  6011????????????

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

電話號碼格式

AC廣告AEAFAGAIAL上午AOAR如在AUAW斧頭AZBABBBD是BFBGBH雙BJBLBMBNBOBQBRBSBTBW通過BZCACC光盤CFCGCHCICKCL厘米CNCOCRCU簡歷CWCXCYCZDEDJDKDM做DZECEE例如EHERESETFI縮略詞FK調頻FOFRGAGBGD通用電器GFGGGHGIGLGMGNGPGQGRGTGUGWGYHKHNHRH T胡IDIEILIM在IO智商IRIS它JEJMJOJ.PKE公斤KHKIKMKNKPKRKWKYKZLA磅LC李LKLRLSLT魯LVLY嘛MCMD我MFMGMHMKMLMMMNMOMPMQ先生女士公噸畝MVMWMXMYMZNANCNENFNG你NL沒有NPNRNUNZOMPAPEPFPGPHPKPL下午PRPSPTPWPYQA回覆RORSRURWSASBSCSDSESGSHSISJSKSLSMSN所以SRSSSTSVSXSYSZTATCTDTGTHTJTKTLTM值TN至TRTT電視TWTZUAUG我們UYUZVA虛電路VEVGVIVNVUWFWSYEYTZAZMZW 選擇國家 ? var cleave = new Cleave('.input-element', { phone: true, phoneRegionCode: '{country}' });

日期格式

var cleave = new Cleave('.input-element', { date: true, 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' });

自定義選項

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

ReactJS組件

import React from 'react'; import ReactDOM from 'react-dom'; import Cleave from 'cleave.js/react'; class MyComponent extends React.Component { onChange(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.onChange.bind(this)} /> ); } } 在操場上試一試

操場

JSFiddle（Basic）?JSFiddle（更多情況）?React JSFiddle?Angular JSFiddle

轉載于:https://www.cnblogs.com/developer-ios/p/10119158.html

總結

以上是生活随笔為你收集整理的Cleave js 使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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