考慮所有需要格式化結(jié)構(gòu)的不同輸入字段。 電話號(hào)碼，信用卡，生日，街道地址……它們都有自己獨(dú)特的模式 。

輕松保留這些字段并信任用戶非常容易。 但是使用Cleave.js （一個(gè)免費(fèi)的 原始 JavaScript插件）來(lái)幫助您自動(dòng)設(shè)置輸入字段的格式可能會(huì)更好。

HTML5帶有自己的一組與數(shù)據(jù)模式（例如電話號(hào)碼） 相關(guān)的輸入 。 使用Cleave，您可以使用自定義輸入將其提升到一個(gè)新的水平，該輸入將在鍵入時(shí)自動(dòng)格式化文本 。

默認(rèn)情況下，該插件支持五種基本文本模式 ：

信用卡號(hào)碼

電話號(hào)碼

日期

數(shù)字樣式（帶逗號(hào)）

自定義輸入字段

最后一個(gè)選擇是最酷的選擇，因?yàn)槟梢?strong>從頭開(kāi)始創(chuàng)建自己的自定義數(shù)據(jù)模式 。 Cleave不會(huì)強(qiáng)迫您遵循任何嚴(yán)格的方法。

取而代之的是，它為您提供了用于構(gòu)建自己的輸入的工具以及對(duì)React和Angular組件的可選支持 。 它還支持所有主流瀏覽器，并且應(yīng)與jQuery一起支持對(duì)舊版瀏覽器的支持。

請(qǐng)注意，這不是一個(gè)很難設(shè)置的插件。 您可以將輸入字段上具有的任何ID或類作為目標(biāo)，并將其傳遞到新的Cleave實(shí)例中 。 這是一個(gè)示例片段：

var cleave = new Cleave('.input-phone', {phone: true,phoneRegionCode: '{country}' });

但是，雖然Cleave可能很容易設(shè)置，但它具有許多可定制的自定義功能 。

所有文檔都存儲(chǔ)在倉(cāng)庫(kù)中 ，因此您需要瀏覽GitHub頁(yè)面以找到所有不同的方法和選項(xiàng) 。 具體來(lái)說(shuō)， 選項(xiàng)頁(yè)面需要經(jīng)歷很多工作，可能需要一段時(shí)間才能找到所需的內(nèi)容。

值得慶幸的是，Cleave提供了許多可以學(xué)習(xí)和復(fù)制的實(shí)時(shí)示例 。 這些示例也可以 從GitHub存儲(chǔ)庫(kù) 免費(fèi)下載 。 如果您想查看更多實(shí)時(shí)示例，請(qǐng)?jiān)L問(wèn)Cleave.js主頁(yè)，或查看演示中擠滿的小提琴 。

翻譯自: https://www.hongkiat.com/blog/cleave-js/

總結(jié)

以上是生活随笔為你收集整理的cleave.js_使用Cleave.js自动设置输入字段的格式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。