Input输入实时格式化

Input输入时，表单实时格式化：如手机号码，身份号，信用卡，银行卡号

Format your content when you are typing
在线案例 https://nosir.github.io/cleave.js/
https://github.com/nosir/cleave.js

npm install cleave.js

使用

// Rollup, WebPack
import Cleave from 'cleave.js';
var cleave = new Cleave('.input-phone', {
    phone: true,
    phoneRegionCode: '{country}'
});

react

import React from 'react';
import Cleave from 'cleave.js/react';
function App() {
  onCreditCardChange(event) {
    // formatted pretty value
    console.log(event.target.value);
    // raw value
    console.log(event.target.rawValue);
  }
  onCreditCardFocus(event) {
    // update some state
  }
  const attrs = {
    placeholder: '请输入银行卡号',
    options: { creditCard: true },
    onFocus: onCreditCardFocus,
    onChange: onCreditCardChange,
  };
  return (
    <Cleave {...attrs} />
  );
}

数字格式化案例

银行卡格式化

日期格式化