Cleave.js：Web表單開發(fā)之實(shí)時(shí)格式化顯示

文末福利資源更新?

特征

• 信用卡號(hào)碼格式
• 電話號(hào)碼格式（國(guó)際化）
• 日期格式
• 數(shù)字格式
• 自定義定界符，前綴和塊模式
• CommonJS / AMD模塊化
• ReactJS組件
• AngularJS指令（1.x）
• ES模塊化

為什么使用Cleave.js?

效果

信用卡

日期

時(shí)間

千分位（貨幣）

手機(jī)號(hào)

自定義

使用

JavaScript

只需引入

cleave-phone.{country}.js 插件僅在啟用電話快捷方式時(shí)才需要。

然后有一個(gè)文本字段

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

在你的JavaScript中 new Cleave

var cleave = new Cleave('.input-phone', {
  phone: true,
  phoneRegionCode: '{country}'
});

React

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

粉絲福利

143期留言+在看幸運(yùn)用戶：暫無。

臨走前留下，今天的福利

• 福利1：《教你玩轉(zhuǎn)手機(jī)攝影，隨手拍出好照片》獲取資源請(qǐng)?jiān)诠娞?hào)對(duì)話框中回復(fù)關(guān)鍵字：FL04，如果沒有關(guān)注請(qǐng)掃下面的二維碼
• 福利2：在看+留言，我隨機(jī)抽取一位認(rèn)真留言的小伙伴，給他發(fā)一個(gè)紅包獎(jiǎng)勵(lì)

猜你喜歡