Blog

入力パターンをかっこよく制御してくれるjQueryプラグイン formatter.js

2013.11.12Cat:EC jQuery jQueryプラグイン

テキストボックスを分けずに、入力パターンを制御してくれるjQueryプラグインformatter.jsを使ってみた。

生年月日や電話番号など、テキストボックスを分けずに1つでも意図した値を得ることができそうと思ったのがきっかけ。

 

まずはこちらからソースをダウンロード

https://github.com/firstopinion/formatter.js

ファイルがいろいろ入っているが、jQueryとformatter.jsを読みこめば良い。

あとは入力フォームを用意して(maxlengthは設定したほうが良い)

JSを実行する。

 

パターンは{{}}で囲う必要があり、それぞれ以下のように指定する。

数字(0-99) → 9

英字(A-Za-z) → a

全て(A-Za-z0-9) → *

 

デモはこちら

demo

 

しかし、使ってみてわかったが、2つ大きな欠点がある。

 

1. 日本語が使えない

姓名の間にスペースを入れるなどのフォーマットはできない。

それは良いとしても、記号や空白文字列も使えないので、結構困る。

正規表現が使えれば良いのだが、対応してないみたい。

 

2. 桁数がフレキシブルじゃない

例えば日本の電話番号だと

03-…の場合もあれば080…の場合もある。

しかしこちらのプラグインでは桁数は予め決めた桁数からの過不足は認められない。

なので使うのであれば完全に桁数が決まっていなければならない。

 

用途は限られるが、特にシリアルなどはわかりやすいので使ってみようと思う。

Author Profile

hoshino
hoshino
ECのことを中心に書きたいと思います。 ネタが無いときはプログラムやデザインのことも書きます。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ