inputタグにクレジットカード番号や電話番号などのフォーマットを適用できるJavaScriptライブラリ「Cleave.js」

Cleave.jsは、inputタグにクレジットカードや電話番号、日付などのフォーマットを適用できるJavaScriptライブラリです。

例えば、クレジットカード番号の入力欄として指定すると4桁区切りでスペースが入るようになりますし、電話番号として指定すると市街局番とその後の番号で区切られスペースが入るようになります。

デモをこちらのページで確認できますので、デモを見てもらう方がわかりやすいと思います。

Cleave.jsの使い方

ファイルの読み込みとinputタグのマークアップ

まずはGitHubからファイル一式をダウンロードするか、下記コマンドでインストールします。

npm install --save cleave.js

下記のファイルを読み込みます。電話番号のフォーマットを利用しない場合はcleave-phone.jp.jsは不要です。

<script src="./dist/cleave.min.js"></script>
<script src="./dist/addons/cleave-phone.jp.js"></script>

inputは下記のようにシンプルなinputタグでOKです。.input-elementというクラスをつけていますが、適宜変更してください。

<input class="input-element" type="text">

クレジットカード番号

クレジットカード番号のフォーマットにしたい場合は、下記のようにJavaScriptを記述します。

var cleave = new Cleave('.input-element', {
    creditCard: true,
    onCreditCardTypeChanged: function (type) {
        // update UI ...
    }
});

「onCreditCardTypeChanged」は、VISAやJCBなど入力されたクレジットカードのブランドによって何かしらの処理を実行したい時に記述します。デモでは、入力した番号によってブランドのロゴが少し拡大して濃く表示されるようになっていて、スクリプトは下記のように記述されています。

var cleaveCreditCard = new Cleave(".input-credit-card", {
  creditCard: true,
  onCreditCardTypeChanged: function(type) {
    type = type.split("15")[0];
    selectedCardIcon = DOM.select(".icon-" + type);

    if (selectedCardIcon) {
      DOM.addClass(selectedCardIcon, "active");
    }
  }
});

電話番号

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

なお、cleave-phone.jp.jsは日本の電話番号に対応したファイルなので、デモのようにセレクトボックスで選択した国の電話番号フォーマットを適用させたい場合など、すべての国の電話番号に対応させるには、cleave-phone.i18n.jsを読み込みます。

そのうえで、phoneRegionCodeを切り替える必要があります。デモでは、下記のようにしてphoneRegionCodeを切り替えています。

var cleavePhone = new Cleave(".input-phone", {
  phone: true,
  phoneRegionCode: "US"
});

selectCountry.addEventListener("change", function() {
  cleavePhone.setPhoneRegionCode(this.value);
  cleavePhone.setRawValue("");
  DOM.html(selectCountryCoverTitle, "Region code: " + this.value);
  DOM.html(
    codePhone,
    DOM.html(codePhone).replace(
      /(\{country\})|(<span class="code-country">\D\D<\/span>)/g,
      '<span class="code-country">' + this.value + "</span>"
    )
  );
  inputPhone.focus();
});

日付

var cleave = new Cleave('.input-element', {
    date: true,
    delimiter: '-',
    datePattern: ['Y', 'm', 'd']
});

時間

var cleave = new Cleave('.input-element', {
    time: true,
    timePattern: ['h', 'm', 's']
});

カンマ区切りの数字

var cleave = new Cleave('.input-element', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand'
});

カスタマイズしたスペース区切り

下記の場合、「4桁 3桁 3桁 4桁」のフォーマットになります。

var cleave = new Cleave('.input-element', {
    blocks: [4, 3, 3, 4],
    uppercase: true
});

区切りのカスタマイズ

下記のようにすると、スペース区切りではなく · で区切られるようになります。

var cleave = new Cleave('.input-element', {
    delimiter: '·',
    blocks: [3, 3, 3],
    uppercase: true
});

区切りのカスタマイズ(複数の区切り)

下記のようにすると、最初の3桁と3桁の区切りは . になり、次の3桁との区切りも . になります。最後の区切りは – になります。このように異なる区切りを指定することも可能です。

var cleave = new Cleave('.input-element', {
    delimiters: ['.', '.', '-'],
    blocks: [3, 3, 3, 2],
    uppercase: true
});

先頭にテキストを入れる

下記のように記述すると、”PREFIX”というテキストが先頭に固定で入るようになります。blocksの最初の桁数はprefixの文字数も含みます。

var cleave = new Cleave('.input-element', {
    prefix: 'PREFIX',
    delimiter: '-',
    blocks: [6, 4, 4, 4],
    uppercase: true
});

あとがき

特にクレジットカード番号の入力欄は、こういうスペース区切りのフォーマットが適用されていることが多いですね。

フォームの電話番号や日付の入力欄などにスペース区切りのフォーマットを適用したい時は、ぜひCleave.jsの導入をご検討ください。