Cleave.jsを使用して入力フィールドを自動的にフォーマットする

次のようなさまざまな入力フィールドについて考えてください。 フォーマットされた構造が必要. 電話番号、クレジットカード、生年月日、番地… 独自のユニークなパターン.

これらのフィールドをそのままにしてユーザーを信頼するのは簡単です。しかし、それを使用する方が良いかもしれません Cleave.js, ある 無料のバニラJavaScriptプラグイン あなたを助けること 入力フィールドを自動的にフォーマットする.

HTML 5には データパターンに関連する独自の入力セット 電話番号など。 Cleaveを使えば、これを次のレベルに進めることができます。 カスタマイズされた入力 それ テキストを自動的にフォーマットする 入力されたとおり.

デフォルトでは、プラグインは 5つの基本的なテキストパターン：

1. クレジットカード番号
2. 電話番号
3. 日付
4. 数値スタイル（カンマ付き）
5. カスタム入力フィールド

その最後の選択はあなたがあなたのものを作ることができるので最もクールなものです 最初から独自のカスタムデータパターン. Cleaveはあなたに厳密な方法論に従うことを強制しません.

代わりに、それはあなたにあなたにツールを与えます あなた自身の入力を構築する と ReactおよびAngularコンポーネントのオプションサポート. それはまた支えます すべての主要ブラウザ とのサポートを一致させる必要があります レガシブラウザ に加えて jQuery.

これはセットアップが難しいプラグインではありません。君は あなたが持っているIDやクラスを問わず 入力欄に それを新しいCleaveインスタンスに渡します. これがサンプルスニペットです：

 var cleave = new Cleave（ '。input-phone'、phone：true、phoneRegionCode： 'country'）; 

しかし、Cleaveを設定するのは簡単かもしれませんが、 多くのカスタム機能 あなたはと遊ぶことができます.

すべてのドキュメントは リポジトリ内でホストされている, ですから、GitHubページを閲覧する必要があります。 すべての異なる方法とオプションを見つける. 具体的には、 オプションページ 通過することがたくさんあり、あなたが欲しいものを見つけるのに時間がかかるかもしれません.

ありがたいことに、Cleaveは持っています たくさんの実例 勉強して複製することができます。これらの例も 無料でダウンロード GitHubリポジトリから。見たいなら もっとライブの例 訪問 Cleave.jsホームページ またはチェックアウト このフィドル デモが詰まった.