フォームのinput要素に電話番号・日付・時間・金額など、数字のフォーマットを定義できるスクリプト -Cleave.js
Post on:2019年2月27日
sponsors
クレジットカード番号・電話番号・日付・時間・金額などを入力するフォームのinput要素に、数字を区切ったり、記号文字を加えたり、入力する数字のフォーマットを簡単に定義できる軽量スクリプトを紹介します。
単体のスクリプトとしてだけでなく、Reactコンポーネント、AngularJSディレクティブでも利用できます。
Cleave.jsの特徴
Cleave.jsは、フォームのinput要素に入力する数字のフォーマットを簡単に定義できます。
- クレジットカード番号のフォーマット
- 電話番号のフォーマット
- 日付・時間のフォーマット
- 数値のフォーマット
- 区切り文字、プレフィックス、ブロックパターン
Cleave.js デモページ: クレジットカード番号
各会社に対応しています。
Cleave.js デモページ: 電話番号
日本を含む、各国の電話番号に対応しています。
Cleave.js デモページ: 日付
年月日に対応しています。
Cleave.js デモページ: 時間
時分秒に対応しています。
Cleave.js デモページ: 数値
3桁区切り、インド・中国式の区切りに対応しています。
Cleave.js デモページ: オプション
ブロックの区切り・区切り文字、プレフィックスに対応しています。
Cleave.jsのデモ
デモでは、さまざまなフォーマットのinput要素を試すことができます。
Cleave.jsの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 |
<script src="cleave.min.js"></script> <script src="cleave-phone.{country}.js"></script> |
Step 2: HTML
input要素はclass名を付与します。
|
1 |
<input class="input-phone" type="text"/> |
Step 3: JavaScript
スクリプトを初期化し、フォーマットを定義します。
|
1 2 3 4 |
var cleave = new Cleave('.input-phone', { phone: true, phoneRegionCode: '{country}' }); |
sponsors
