jQuery を使って入力ボックスに郵便番号のマスクを適用してみた

デモを見る

jQuery を使って、入力ボックスに郵便番号のマスクを適用してみました。

入力ボックスがフォーカスを得ると、"1234567" の書式での入力に制限します。また、入力済みの郵便番号があるときは、その郵便番号を選択状態にします。
入力ボックスがフォーカスを失うと、"123-4567" のハイフン付きの書式に変更します。

カット & ペーストに対するマスクは対応していません。今後の課題です。現在、シンプルかつ確実な方法を模索しています。

jQuery(function($) {

$('#c')
  .keypress(function(e) {
      var code = typeof(e.charCode) != 'undefined'
        ? e.charCode : e.keyCode;

入力した文字コードを判別するため、ブラウザの差異を吸収します。Firefox など charCode プロパティを持つブラウザは charCode プロパティを、IE など charCode プロパティを持たないブラウザは keyCode プロパティを使います。
なお fix_events.js プラグインを使うと、キーボードイベントのブラウザの差異を吸収できるようです。

      if (code && !e.ctrlKey)

なんらかの文字を入力して Ctrl キーを押していないとき、文字の入力を制限します。
Ctrl キーを除外しているのは、カット (Ctrl+C) & ペースト (Ctrl+V) などを受け入れるためです。

        if ((code < 48 || code > 57)
          && code != 8 // BACKSPACE (Safari3)
          && code != 9 // TAB (Safari3)
          && code != 13) // RETURN (IE6, Opera9, Safari3)
            e.preventDefault();
    })

数字以外の文字のときはイベントをキャンセルし、既定の振る舞いをするよう促します。
ただし preventDefault メソッドの解釈がブラウザにより異なるため、バックスペースキー、タブキー、リターンキーのみ明示的に受け入れるようにしています。

  .focus(function() {
      var c = this.value;
      c = c.replace(/[^\d]/g, '');
      this.maxLength = 7;
      this.value = c;
      $(this).select();
    })

フォーカスを得たとき、入力ボックスの値を数字だけに変更します。このとき、入力文字数を7文字に制限して、入力済み数字があれば選択状態にします。

  .blur(function() {
      var c = this.value;
      c = c.replace(/[^\d]/g, '');
      if (c.length >= 3)
        c = c.substr(0, 3) + '-' + c.substr(3);
      this.maxLength = 8;
      this.value = c;
    });

フォーカスを失ったき、入力ボックスの値を "123-4567" の書式に変更します。

$('#c')
  .blur();

WEB ページをロードしたとき、入力ボックスの明示的にフォーカスを失わせ、入力ボックスの値が "123-4567" の書式になるようにつじつまを合わせます。

$('#f')
  .submit(function() {
      $('#c').blur();
    });

}); //jQuery

フォームを送信するときも同様です。

となりのトトロ SG-047A 郵便番号 by G-Tools