指定フォーマットに沿って自動補完/エラーチェック「Formance.js」
Formance.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。
Webフォームで予め指定した入力に沿って行った貰うためにドロップダウンやテキストボックスを分割して表示したりします。例えば電話番号入力や日付入力です。しかしとてもユーザビリティが高いとは思えません。そこで使ってみたいのがFormance.jsです。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.47.58.1379208858.png)
入力フォーマットが違う場合はInvalidと出ています。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.48.04.1379208863.png)
正しい形式になりました。括弧やハイフンは自動で入力されます。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.48.16.1379208867.png)
日付入力もスラッシュが自動で入力されます。さらに月は9などと入力すれば0が補完されます。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.48.40.1379208871.png)
日付のフォーマットは指定可能です。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.49.01.1379208876.png)
メールアドレスは簡易またはある程度厳密なチェックが指定できます。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.49.12.1379208880.png)
クレジットカードのセキュリティコード。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.49.35.1379208884.png)
クレジットカードの入力チェック。チェックデジットもサポートされます。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.50.07.1379208889.png)
カナダの郵便番号。入力パターンは細かく指定できます。
Formance.jsを使うと日付の入力をテキストボックスだけでシンプルに行えるようになります。自分で拡張することもできそうです。ユーザの入力ミスを防いだり、ユーザビリティを高めるのに使ってみたいライブラリです。
MOONGIFTはこう見る
この手のライブラリが活きるのは業務システムではないでしょうか。ドロップダウンから年月日を選択するのは非常に面倒なので、テキストボックスにキーボード入力するのは簡単で良さそうです。自動補完は慣れないユーザにとっては戸惑いを感じてしまう可能性があります。
Windowsアプリではこういった自動補完入力が数多くあります。Webサイトではまだ一般的ではありませんが、今後Webアプリケーションが広まっていけばこういった入力インタフェースが流行ってくるかも知れません。