Cleave.js:输入内容格式化工具

boyanx5个月前技术教程15

我有 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} />

);

}

}

微信订阅号:开源派 (opensourcepie)

开源派官网:osp.io 作者:叶秀兰

标签: js输入框

相关文章

HTML5原生js写了一个掉落的登陆框,居然还能跳!

源码/视频评论后加前端学习群470593776JavaScript课题:100+特效大揭秘之梦幻登录特效PS:掉落的输入框,居然还能跳知识点:原生js动画效果 ,重力系统+元素弹跳算法, 递归在特效中...

Web前端:JavaScript最强总结,最全面的零基础入门教程

JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。JavaScript...

如何在JavaScript中实现数字输入框的范围限制?

在 JavaScript 语言中,实现数字输入框的范围限制可以通过多种方式实现,最常见的方式是利用 JavaScript 的事件监听机制,和通过 JavaScript 的条件判断语句来实现范围限制。以...

JavaScript全解析——正则表达式

正则——RegExp●正则也叫正则表达式,又名 “规则表达式”●正则是JS中的数据类型, 是一个复杂数据类型●由我们自己来书写 “规则”,专门用来检测 字符串 是否符合 “规则” 使用的●我们使用一些...

如何在JavaScript中限制输入框的字符长度?

在 JavaScript 语言里,有多种方式可以能够有效地对输入文本框的长度进行精准的断言限制。下面为您详细介绍常见且实用的实现方法。其中一种方式是过 JavaScript 的内置函数和属性,如 ma...

如何用JavaScript判断输入值是数字还是字母?

在日常开发中,我们有时候需要判断用户输入的是数字还是字母。本文将介绍如何用JavaScript实现这一功能。检查输入值是否是数字或字母要判断输入值是数字还是字母,我们可以通过JavaScript获取输...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。