ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Formance.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Webフォームで予め指定した入力に沿って行った貰うためにドロップダウンやテキストボックスを分割して表示したりします。例えば電話番号入力や日付入力です。しかしとてもユーザビリティが高いとは思えません。そこで使ってみたいのがFormance.jsです。


入力フォーマットが違う場合はInvalidと出ています。


正しい形式になりました。括弧やハイフンは自動で入力されます。


日付入力もスラッシュが自動で入力されます。さらに月は9などと入力すれば0が補完されます。


日付のフォーマットは指定可能です。


メールアドレスは簡易またはある程度厳密なチェックが指定できます。


クレジットカードのセキュリティコード。


クレジットカードの入力チェック。チェックデジットもサポートされます。


カナダの郵便番号。入力パターンは細かく指定できます。

Formance.jsを使うと日付の入力をテキストボックスだけでシンプルに行えるようになります。自分で拡張することもできそうです。ユーザの入力ミスを防いだり、ユーザビリティを高めるのに使ってみたいライブラリです。


MOONGIFTはこう見る

この手のライブラリが活きるのは業務システムではないでしょうか。ドロップダウンから年月日を選択するのは非常に面倒なので、テキストボックスにキーボード入力するのは簡単で良さそうです。自動補完は慣れないユーザにとっては戸惑いを感じてしまう可能性があります。

Windowsアプリではこういった自動補完入力が数多くあります。Webサイトではまだ一般的ではありませんが、今後Webアプリケーションが広まっていけばこういった入力インタフェースが流行ってくるかも知れません。

Formance.js by Omar Shammas

omarshammas/jquery.formance

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2