js实现input输入框内容自动格式化工具-Cleave.js使用教程

Cleave.js 是一个 JavaScript 库，用于在数据输入时自动应用格式化模式，常用于输入框中金额、电话号码等数据的格式化。

以下是如何使用 Cleave.js 来格式化输入框的示例：

1. 首先，在 HTML 中添加一个输入框：

<input type="text" id="phoneNumber" placeholder="Enter phone number">

2. 接着，引入 Cleave.js 库和它的 CSS 文件：

<script src="cleave.min.js"></script>
<link rel="stylesheet" href="cleave.css">

3. 最后，使用 JavaScript 初始化 Cleave，并指定格式化模式：

// 获取输入框元素
var phoneNumber = document.getElementById('phoneNumber');
 
// 创建 Cleave 实例，并应用格式化模式
var cleavePhone = new Cleave(phoneNumber, {
    phone: true,
    delimiter: '-',
    blocks: [0, 3, 3, 4]
});

在这个例子中，Cleave 被用来创建一个电话号码输入框，其中 phone: true 指定了电话格式，delimiter 设置了分隔符（连字符），blocks 数组定义了电话号码的组成块。

Cleave.js 还支持自定义模式、国际化等功能，可以根据具体需求进行配置。