資料結構
網路
關係資料庫管理系統
作業系統
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 次瀏覽
