使用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 文件的标签内添加以下代码片段。

<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类实例。第一步是创建一个 div 内部，在其中我们将创建另一个名为credit-card的 div 类。

考虑下面显示的代码片段。

<div id="main">
   <div class="form">
      <input class="credit-card" type="text" placeholder="Enter your Credit Card Number" />
   </div>
</div>

我们需要在打开 <body> 标签后立即放置这个 div 在我们的 index.html 代码中。

下一步是创建 <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类实例，但这次是用于电话号码而不是信用卡。

在此之前，我们需要添加一个CDN链接，用于相应的Cleave国家号码，由于我位于印度，我将使用”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 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标签放在打开<body>标签之后的代码中。

下一步是创建一个<script>标签，我们将在其中使用这个input标签，并添加自动格式化的方法。我们已经有一个用于credit-card类的<script>标签，我们需要再添加一个用于mobile-number类的<script>标签。

请参考下面显示的<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>标签关闭之前，我们在其中创建了一个Cleave()类的实例。

然后，我们首先传递的是输入类的名称，然后我们传递了一个对象，其中有三个不同的属性，即 date 设置为True，第二个是 datePattern 设置为[‘m’，’d’，’y’]，最后是一个 delimiter 其值将用作日期值之间的分隔符。

如果你在浏览器中运行HTML代码，你将得到一个输入字段，它将接受带有分隔符的日期值。