我有 Cleave.js，你怎么输入我都无所谓。

Cleave.js 是一款非常简单的输入框内容格式化工具，可以自动帮助你格式化输入的文本内容。

Cleave.js 遵循 Apache 2.0 开源授权协议。

在线演示：https://nosir.github.io/cleave.js/

GitHub 地址：https://github.com/nosir/cleave.js

特性

  • 银行卡号格式化
  • 手机号码格式
  • 日期格式化
  • 数值格式化
  • 自定义分界符，前缀和分块模式
  • CommonJS / AMD 模式
  • ReactJS 组件移植

使用

<script src="cleave.min.js"></script>
<script src="cleave-phone.{country}.js"></script>

ReactJS 组件使用

import React from 'react';
import ReactDOM from 'react-dom';

import Cleave from 'cleave.js/react';

JSX：

class MyComponent extends React.Component {

    constructor(props, context) {
        super(props, context);
        this.onCreditCardChange = this.onCreditCardChange.bind(this);
    }

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