HTML5のinput typeはdateやtimeなどの指定によって入力できる情報が変わるようになり、UXが改善されています。しかしさらに細かい入力制御を行う場合にはJavaScriptに頼らないといけません。 よりユーザビリティの高い入力インタフェースを実現したいならばCleave.jsを使ってみるのはいかがでしょう。

Cleave.jsの使い方

よくあるクレジットカードの入力フォームです。

桁数の制御はもちろん、カードの種別も出るようになっています。

電話番号。日本の場合は特に制御はなさそうですが、数字のみ入力できます。

日付の入力です。スラッシュが自動的に入力されます。

3桁ごとにカンマが入る入力です。

指定した文字ごとにスペースを空けたり、指定した文字（ダッシュなど）を追加できます。

郵便番号や電話番号の入力でダッシュが入っているからエラーなどという酷いUIのサイトはたくさんあります。あらかじめ入力制御したり、変換するなどできるはずです。なるべくユーザにストレスをかけないためにも導入を検討したいライブラリです。

Cleave.jsはJavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。

Cleave.js - Format input text content when you are typing nosir/cleave.js: Format input text content when you are typing