Cleave.js：Web表单开发之实时格式化显示

文末福利资源更新 

特征

• 信用卡号码格式
• 电话号码格式（国际化）
• 日期格式
• 数字格式
• 自定义定界符，前缀和块模式
• 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：在看+留言，我随机抽取一位认真留言的小伙伴，给他发一个红包奖励

猜你喜欢