数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 Cleave.js 自动格式化输入文本内容
自动格式化是那些难以实现但同时又能极大提升用户体验的功能之一。当需要自动格式化输入文本内容时，可以使用不同的 JavaScript 库，但其中最受欢迎的是 Cleave.js。
Cleave.js 是一个主要用于格式化输入文本内容的 JavaScript 库，它运行非常流畅。它非常轻量级，易于上手。在本教程中，我们将通过几个示例演示如何使用 Cleave.js 自动格式化输入文本。
您可能已经注意到，大多数支付网关网站都嵌入了输入文本内容的自动格式化功能。例如，当您输入信用卡详细信息时，您可能会注意到在您输入值时数字会以某种特定格式进行格式化，或者也可能是在输入过程中动态添加了一些分隔符。
使用 Cleave.js 自动格式化输入文本
让我们尝试创建一个类似的信用卡自动格式化输入元素。第一步是创建一个简单的html模板文件。请考虑以下index.html文件，您可以以此作为开始。
index.html
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cleave - Formatting Input</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
这是一个非常简单的 HTML 代码模板。在此代码中，我们将逐步添加更改，首先是能够使用 Cleave.js，为此，我们需要使用其 CDN 链接。
确保您在index.html文件的<body>标签内添加以下代码片段。
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js"></script>
在上面的<script>标签中，我们正在导入包含 Cleave.js 所有核心逻辑的主要“cleave.min.js”文件，在创建其类实例时我们需要用到这些逻辑。
style.css
在创建 Cleave 库的实例之前，还有一件事需要做，那就是在我们的项目中添加style.css文件。请考虑以下所示的 style.css。
body {
text-align: center;
margin: 0 auto;
top: 20%;
}
#main {
text-align: center;
margin: auto;
display: flex;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400px;
height: 200px;
margin: auto;
}
.form > input {
width: 150%;
height: 20%;
}
此style.css在我们将要进行的示例中不会发生变化，因此您可以将其保存并从现在开始专注于index.html文件。
Cleave 类实例
在下一步中，让我们关注信用卡示例的 Cleave 类实例。第一步是在其中我们将创建另一个名为 credit-card 的类的div的div。
请考虑以下所示的代码片段。
<div id="main">
<div class="form">
<input class="credit-card" type="text" placeholder="Enter your Credit Card Number" />
</div>
</div>
我们需要将此div放置在index.html代码中打开<body>标签之后。
下一步是在<script>标签内创建，我们将在其中使用此输入标签，然后添加自动格式化方法。请考虑以下所示的<script>标签。
<script>
new Cleave('.credit-card', {
creditCard: true,
creditCardStrictMode: true,
delimiter: '-'
});
</script>
该<script>标签需要放置在我们上面提到的 CDN 链接之后。请考虑以下所示的index.html更新后的代码。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cleave - Formatting Input</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div class="form">
<input class="credit-card" type="text" placeholder="Enter your Credit Card Number" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js"></script>
<script>
new Cleave('.credit-card', {
creditCard: true,
creditCardStrictMode: true,
delimiter: '-'
});
</script>
</body>
</html>
上面代码中最重要的部分是位于<body>标签闭合之前的<script>标签。在<script>标签内，我们正在创建 Cleave() 类的实例，然后我们传递的第一件事是输入类的名称。
然后我们传递一个对象，其中包含三个不同的属性，即creditCard设置为 True，第二个是creditCardStrictMode也设置为 True，最后是delimiter，其值将用作卡号值之间的分隔符。
如果您在浏览器中运行 HTML 代码，您将获得一个输入字段，该字段将根据不同的信用卡发行商接受不同的格式。
使用 Cleave.js 自动格式化电话号码
在下一步中，让我们专注于创建一个新的 Cleave 类实例，但这次是用于电话号码而不是信用卡。
在执行此操作之前，我们需要为相应的 Cleave 国家号码添加一个 CDN 链接，由于我位于印度，因此我将使用“cleave-phone.in.js”。您可以随意使用您所在国家的“cleave.phone.{country}.js”。
在index.html代码中“cleave.min.js”CDN之后添加以下 CDN 链接。
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/addons/cleave-phone.in.js"></script>
第一步是在具有 form 类的div内创建另一个<input>标签。请考虑以下所示的代码片段。
<div id="main">
<div class="form">
<input class="credit-card" type="text" placeholder="Enter your Credit Card Number" />
<input class="mobile-number" type="text" placeholder="Enter your mobile-number" />
</div>
</div>
我们需要将此div放置在index.html代码中打开<body>标签之后。
下一步是在<script>标签内创建，我们将在其中使用此输入标签，然后添加自动格式化方法。我们已经有一个<script>标签用于credit-card 类；我们需要为mobile-number 类添加一个。
请考虑以下所示的<script>标签。
<script>
new Cleave('.credit-card', {
creditCard: true,
creditCardStrictMode: true,
delimiter: '-'
});
new Cleave('.mobile-number', {
phone: true,
phoneRegionCode: 'IN',
prefix: '+91'
});
</script>
上面显示的<script>标签需要放置在我们上面提到的 CDN 链接之后。请参见以下所示的更新后的index.html代码。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cleave - Formatting Input</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div class="form">
<input class="credit-card" type="text" placeholder="Enter your Credit Card Number" />
<input class="mobile-number" type="text" placeholder="Enter your mobile-number" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/addons/cleave-phone.in.js"></script>
<script>
new Cleave('.credit-card', {
creditCard: true,
creditCardStrictMode: true,
delimiter: '-'
});
new Cleave('.mobile-number', {
phone: true,
phoneRegionCode: 'IN',
prefix: '+91'
})
</script>
</body>
</html>
上面代码中最重要的部分是位于<body>标签闭合之前的<script>标签，在其中我们正在创建 Cleave() 类的实例。
然后我们传递的第一件事是输入类的名称，然后我们传递一个对象，其中包含三个不同的属性，即date设置为 True，第二个是datePattern设置为['m','d','y']，最后是delimiter，其值将用作日期值之间的分隔符。
如果您在浏览器中运行 HTML 代码，您将获得一个输入字段，该字段将使用分隔符分隔值来接受日期值。
结论
在本教程中，我们使用多个示例演示了如何使用 Cleave.js 自动格式化输入文本内容。
662 次浏览
