inputをパターン制御をするライブラリ【formatter.js】

WEB制作
inputをパターン制御をするライブラリ【formatter.js】

formatter.jsは、inputをパターン制御をする事ができるライブラリです。

jQueryでラッパーされたjquery.formatter.jsもあります。

GitHub

目次

デモ

See the Pen formatter.js demo by mizusawa (@webty_mizusawa) on CodePen.

使い方

// Vanilla Javascript
var formatted = new Formatter(document.getElementById('credit-input'), {
  'pattern': '{{999}}-{{999}}-{{999}}-{{9999}}',
  'persistent': true
});
// jQuery
$('#credit-input').formatter({
  'pattern': '{{999}}-{{999}}-{{999}}-{{9999}}',
  'persistent': true
});

パターンの設定

パターンは({{999}}) {{999}}-{{999}}のような形式で指定できます。

パターンは、{{}}の中にメタ文字を記述することができます。

初期では、以下の3つがメタ文字として設定させています。

  • 9: [0-9]
  • a: [A-Za-z]
  • *: [A-Za-z0-9]

メタ文字の追加

メタ文字はaddInptType関数を使用することによって追加することができます。

// Vanilla Javascript
Formatter.addInptType('L', /[A-Z]/);

// jQuery
$.fn.formatter.addInptType('L', /[A-Z]/);

オプション

persistent

persistentパラメータは、Trueの場合、常にハイフンなどのパターンの変わらない部分が表示されます。Falseの場合、適宜表示されます。初期値はFalseです。

patterns

フォームに入力された値からパターンをフレキシブルに変更する事ができます。

[
  { '^\d{5}$': 'zip: {{99999}}' },
  { '^.{6,8}$: 'postal code: {{********}}' },
  { '*': 'unknown: {{**********}}' }
]

パターンのリセット

resetPattern関数を用いることで既に設定しているパターンをリセットすることができます。

// Vanilla Javascript
formatted.resetPattern('{{999}}.{{999}}.{{9999}}');

// jQuery
$('#selector').formatter().resetPattern();