はじめに
クレジットカード番号を入力するフォームで、4桁ごとに自動でスペースが入る挙動を見たことはありませんか。あるいは金額入力欄で、桁数が増えるたびに勝手にカンマ区切りが付く動きも見覚えがあるはずです。
こうした入力整形は地味に面倒です。inputイベントを拾ってカーソル位置を保ちながら文字列を差し替える処理は、自前で書くとバグの温床になりがちです。カーソルが飛ぶ、全角文字が混ざる、バックスペースで消せなくなる——一度は踏んだことがある方も多いでしょう。
Cleave.jsは、こうした入力フォーマットの面倒な部分だけを肩代わりしてくれるライブラリです。対象のinput要素を渡すだけで、クレジットカード番号・日付・電話番号・金額など、よくあるパターンの整形をカーソル位置を保ったまま処理してくれます。
とはいえ、読むより触った方が早いと思います。クレジットカード番号を入力すると自動でカード種別を判定しながら整形する挙動を実際に動かせるので、先に挙動を見たい方はこちらからどうぞ。
Cleave.jsとは
Cleave.jsは、フォーム入力欄の文字列をリアルタイムで整形するJavaScriptライブラリです。対象の要素に対してnew Cleave(element, options)とオプションを渡すだけで、入力中の値を指定したパターンに沿って自動整形します。
依存ライブラリはなく、素のinput要素に対して直接使えるほか、Reactやvue向けのラッパーライブラリも別途公開されています。
主な特徴
- カーソル位置を維持したまま整形する - 入力途中でも区切り文字が挿入され、カーソルが飛ばない
- 用途別のプリセットが豊富 - クレジットカード番号、日付、金額（numeral）などをオプション1つで切り替えられる
- カスタムブロックパターンに対応 -
blocksとdelimiterを指定すれば、郵便番号や独自コードのような任意の区切りパターンも作れる - 軽量で依存なし - コア部分はプレーンJavaScriptのみで動作する
インストール
npmやyarnからインストールできます。
npm install cleave.js
yarn add cleave.js
CDN経由で<script>タグから読み込むことも可能です。
Cleave.jsのサンプルを動かす
以下はCleave.jsのcreditCard: trueオプションを使い、クレジットカード番号の入力欄をVisa・Mastercard・JCBなどのカード種別に応じて自動整形するサンプルです。数字を入力すると4桁ごとにスペースが入り、カード番号の先頭桁からカードブランドを判定した結果も表示されます。
要点は次のとおりです。creditCard: trueを指定するだけで4桁区切りの整形が有効になり、onCreditCardTypeChangedコールバックでカード種別の変化を検知できます。
import Cleave from 'cleave.js'
const cleave = new Cleave('#card-input', {
creditCard: true,
onCreditCardTypeChanged: (type) => {
console.log('カード種別:', type) // 'visa' | 'mastercard' | 'unknown' など
},
})
// 整形済みの生の値（区切り文字なし）を取得する
cleave.getRawValue()
実際に動かせるものが下です。入力欄に 4111111111111111（Visaのテスト番号）や 5500000000000004（Mastercardのテスト番号）を打ち込んでみてください。
4111から始めるとVisa、5500から始めるとMastercardと判定が切り替わるのが分かります。カーソルを番号の途中に置いたまま数字を削除しても、区切りスペースの位置がずれずに保たれる点がCleave.jsのcreditCardオプションの特徴です。
基本的な使い方
creditCardのようなプリセットを使わず、独自の区切りパターンを作りたい場合はblocksとdelimiterを組み合わせます。例えば4桁ずつ区切る場合は次のように書きます。
import Cleave from 'cleave.js'
new Cleave('.input-element', {
blocks: [4, 4, 4, 4],
delimiter: '-',
uppercase: true,
})
blocksは各グループの文字数、delimiterはグループ間に挿入する文字を指定します。uppercase: trueを付けると入力中の英字が自動で大文字化されます。この2つのオプションだけで、シリアルコードや会員番号のような任意のフォーマットに対応できます。
実践的なユースケース
日付入力の整形
生年月日や有効期限のような日付入力では、date: trueとdatePatternを組み合わせます。datePattern: ['m', 'd', 'Y']と指定すると、月・日・年の順で自動的にスラッシュ区切りが挿入されます。
datePatternの並び順を['Y', 'm', 'd']に変えると、年から始まる2026/08/20形式の入力欄に変わります。日本語のフォームで和暦や年始まりの表記に合わせたいときに便利です。
金額・数値のカンマ区切り
金額入力欄では、numeral: trueを指定すると桁区切りのカンマが自動で挿入されます。numeralThousandsGroupStyleでグループ化の方式を、prefixで通貨記号を付けられます。
numeralThousandsGroupStyleを'lakh'に変えるとインド式の桁区切り（万進法に近い区切り）に、'wan'に変えると日本の万単位に近い4桁区切りになります。prefixを'$'に変えれば、ドル表記の金額入力欄としてそのまま使えます。
カスタムブロックでの郵便番号入力
日本の郵便番号（123-4567形式）のような、決まった桁数で区切りたいだけのケースでは、プリセットを使わずblocksとdelimiterだけで十分です。
numericOnly: trueを付けているため、数字以外は入力しても無視されます。blocksを[3, 4, 4]のように3要素にすれば、電話番号のような3グループの区切りにも同じ考え方で対応できます。
まとめ
Cleave.jsを使うと、クレジットカード番号・日付・金額・カスタムパターンといった入力整形を、カーソル位置のずれやバグに悩まされることなく実装できます。プリセットオプションを切り替えるだけで主要なパターンをカバーでき、blocksとdelimiterを使えば独自フォーマットにも柔軟に対応可能です。
フォーム周りの入力整形を自前で書いて消耗しているなら、まずは対象のinput要素にCleave.jsを差し込んでみることをおすすめします。オプションを1つ変えるだけで挙動が大きく変わる手軽さを、ぜひ体感してみてください。