よくある入力フォーマットに沿っていない時のエラーによるイライラが軽減しそうです。 テキストボックスを使ってユーザに入力を行ってもらうのはシンプルですが、それが指定したフォーマットに沿っているかどうかを判断するのは大変です。その結果エラーになったりするとユーザにとっても大きなストレスになります。 そこで予め決まったフォーマットに沿ってしか入力できないようにしてしまうのが良さそうです。そのためのソフトウェアがformatter.jsです。 使い方はjQueryを使う、使わないの2パターンが用意されているようです。

// jQueryを使わない方法
new Formatter(document.getElementById('credit-input'), {
  'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}'
});

// jQueryを使う方法
$('#credit-input').formatter({
  'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}'
});

例えば上記の場合、4桁の数字を4回、ハイフン区切りでの入力になります。つまりクレジットカード番号の入力です。

さらに例えば電話番号の場合は次のようになります。

// jQueryを使わない方法
new Formatter(document.getElementById('phone-input'), {
  'pattern': '({{999}}) {{999}}.{{9999}}',
  'persistent': true
});

// jQueryを使う方法
$('#phone-input').formatter({
  'pattern': '({{999}}) {{999}}-{{9999}}',
  'persistent': true
});

デモの画像は下記になります。

入力区切りは自由に指定ができるようです。入力フォーマットが決まっていると初回の入力時には違和感があるのですが、慣れてしまえば入力がぐっと楽になります。業務システムで使うのも良さそうです。 そもそも必ずハイフン区切り、またはその逆や全角数字での入力などを強制する方が変ではあるのですが（システムで変換すれば良いだけなので）、どうしてもという場合はクライアントサイドで変換するようにすればユーザストレスは幾分軽減されるのではないでしょうか。 formatter.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 formatter.js by firstopinion デモ：formatter.js by firstopinion firstopinion/formatter.js