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

文末福利資源更新?

特征

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

為什么使用Cleave.js?

效果

信用卡

日期

時間

千分位（貨幣）

手機號

自定義

使用

JavaScript

只需引入

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

然后有一個文本字段

<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期留言+在看幸運用戶：暫無。

臨走前留下，今天的福利

• 福利1：《教你玩轉手機攝影，隨手拍出好照片》獲取資源請在公眾號對話框中回復關鍵字：FL04，如果沒有關注請掃下面的二維碼
• 福利2：在看+留言，我隨機抽取一位認真留言的小伙伴，給他發(fā)一個紅包獎勵

猜你喜歡