フォームのinput要素に電話番号・日付・時間・金額など、数字のフォーマットを定義できるスクリプト -Cleave.js

クレジットカード番号・電話番号・日付・時間・金額などを入力するフォームのinput要素に、数字を区切ったり、記号文字を加えたり、入力する数字のフォーマットを簡単に定義できる軽量スクリプトを紹介します。

単体のスクリプトとしてだけでなく、Reactコンポーネント、AngularJSディレクティブでも利用できます。

サイトのキャプチャ

Cleave.js -GitHub

Cleave.jsの特徴

Cleave.jsは、フォームのinput要素に入力する数字のフォーマットを簡単に定義できます。

  • クレジットカード番号のフォーマット
  • 電話番号のフォーマット
  • 日付・時間のフォーマット
  • 数値のフォーマット
  • 区切り文字、プレフィックス、ブロックパターン
デモのキャプチャ

Cleave.js デモページ: クレジットカード番号
各会社に対応しています。

デモのキャプチャ

Cleave.js デモページ: 電話番号
日本を含む、各国の電話番号に対応しています。

デモのキャプチャ

Cleave.js デモページ: 日付
年月日に対応しています。

デモのキャプチャ

Cleave.js デモページ: 時間
時分秒に対応しています。

デモのキャプチャ

Cleave.js デモページ: 数値
3桁区切り、インド・中国式の区切りに対応しています。

デモのキャプチャ

Cleave.js デモページ: オプション
ブロックの区切り・区切り文字、プレフィックスに対応しています。

Cleave.jsのデモ

デモでは、さまざまなフォーマットのinput要素を試すことができます。

サイトのキャプチャ

Plain JSFiddle (Basic usage)

Cleave.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 2: HTML

input要素はclass名を付与します。

Step 3: JavaScript

スクリプトを初期化し、フォーマットを定義します。

sponsors

top of page

©2019 coliss