cleave.js_使用Cleave.js自动设置输入字段的格式

考虑所有需要格式化结构的不同输入字段。 电话号码，信用卡，生日，街道地址……它们都有自己独特的模式 。

轻松保留这些字段并信任用户非常容易。 但是使用Cleave.js （一个免费的 原始 JavaScript插件）来帮助您自动设置输入字段的格式可能会更好。

HTML5带有自己的一组与数据模式（例如电话号码） 相关的输入 。 使用Cleave，您可以使用自定义输入将其提升到一个新的水平，该输入将在键入时自动格式化文本 。

默认情况下，该插件支持五种基本文本模式 ：

1. 信用卡号码
2. 电话号码
3. 日期
4. 数字样式（带逗号）
5. 自定义输入字段

最后一个选择是最酷的选择，因为您可以从头开始创建自己的自定义数据模式 。 Cleave不会强迫您遵循任何严格的方法。

取而代之的是，它为您提供了用于构建自己的输入的工具以及对React和Angular组件的可选支持 。 它还支持所有主流浏览器，并且应与jQuery一起支持对旧版浏览器的支持。

请注意，这不是一个很难设置的插件。 您可以将输入字段上具有的任何ID或类作为目标，并将其传递到新的Cleave实例中 。 这是一个示例片段：

var cleave = new Cleave('.input-phone', {
    phone: true,
    phoneRegionCode: '{country}'
});

但是，虽然Cleave可能很容易设置，但它具有许多可定制的自定义功能 。

所有文档都存储在仓库中 ，因此您需要浏览GitHub页面以找到所有不同的方法和选项 。 具体来说， 选项页面需要经历很多工作，可能需要一段时间才能找到所需的内容。

值得庆幸的是，Cleave提供了许多可以学习和复制的实时示例 。 这些示例也可以 从GitHub存储库 免费下载 。 如果您想查看更多实时示例，请访问Cleave.js主页，或查看演示中挤满的小提琴 。

翻译自: https://www.hongkiat.com/blog/cleave-js/