Cleave.js 使用教程

Cleave.js 使用教程

cleave.jsFormat input text content when you are typing...项目地址:https://gitcode.com/gh_mirrors/cl/cleave.js

项目介绍

Cleave.js 是一个用于自动格式化输入文本内容的 JavaScript 库。它的主要目的是通过格式化用户输入的数据来提高输入字段的易读性。Cleave.js 支持多种格式化功能，包括信用卡号码格式化、电话号码格式化、日期格式化和数字格式化等。此外，它还支持自定义分隔符、前缀和块模式，并且兼容 CommonJS、AMD 和 ES 模块。

项目快速启动

安装

你可以通过 npm 安装 Cleave.js：

npm install --save cleave.js

或者通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/cleave.min.js"></script>

使用示例

以下是一个简单的使用示例，展示如何在输入框中格式化信用卡号码：

<input class="input-credit-card" type="text" />

<script src="https://cdn.jsdelivr.net/npm/cleave.js@1.6.0/dist/cleave.min.js"></script>
<script>
    var cleave = new Cleave('.input-credit-card', {
        creditCard: true,
        onCreditCardTypeChanged: function (type) {
            console.log(type);
        }
    });
</script>

应用案例和最佳实践

信用卡号码格式化

在电子商务网站中，格式化信用卡号码是一个常见的需求。Cleave.js 可以轻松实现这一功能：

<input class="input-credit-card" type="text" />

<script>
    var cleave = new Cleave('.input-credit-card', {
        creditCard: true,
        onCreditCardTypeChanged: function (type) {
            // 更新 UI 以显示信用卡类型
        }
    });
</script>

电话号码格式化

在注册表单中，格式化电话号码可以提高用户体验：

<input class="input-phone" type="text" />

<script>
    var cleave = new Cleave('.input-phone', {
        phone: true,
        phoneRegionCode: 'CN'
    });
</script>

日期格式化

在日期输入字段中，格式化日期可以确保用户输入的日期符合预期格式：

<input class="input-date" type="text" />

<script>
    var cleave = new Cleave('.input-date', {
        date: true,
        delimiter: '-',
        datePattern: ['Y', 'm', 'd']
    });
</script>

典型生态项目

Cleave.js 可以与其他前端框架和库结合使用，例如 React 和 Angular。以下是一些典型生态项目的示例：

React 组件

Cleave.js 提供了 React 组件，可以方便地在 React 项目中使用：

import React from 'react';
import Cleave from 'cleave.js/react';

class MyComponent extends React.Component {
    onCreditCardTypeChanged = (event) => {
        console.log(event.target.dataset.creditCardType);
    }

    render() {
        return (
            <Cleave
                options={{
                    creditCard: true,
                    onCreditCardTypeChanged: this.onCreditCardTypeChanged
                }}
                placeholder="Enter your credit card number"
                className="form-control"
            />
        );
    }
}

export default MyComponent;

Angular 指令

Cleave.js 也提供了 Angular 指令，可以在 Angular 项目中使用：

<input cleave [options]="{creditCard: true}" (onCreditCardTypeChanged)="onCreditCardTypeChanged($event)" />

通过这些示例，你可以看到 Cleave.js 在不同前端框架中的应用，以及如何结合其他生态项目来提高开发效率和用户体验。

cleave.jsFormat input text content when you are typing...项目地址:https://gitcode.com/gh_mirrors/cl/cleave.js