入力ボックスに郵便番号のマスクを適用する #2

ホーム > Postal Search Ajax API with jQuery > Forms with Function

jQuery を使って、入力ボックスに郵便番号のマスクを適用する方法の続編です。過去の経緯は入力ボックスに郵便番号のマスクを適用する #1 を見てください。ここでは過去の差分を中心にポイントを紹介します。

Ctrl キーに加えて Alt キーを押しているときは、そのキー入力は有効として振る舞うようにしました。 onkeypress イベントで Alt キーを無効とすると、ブラウザにより Alt+? の機能が使えなくなるためです。

onfocus イベントの中で select を使って、テキストの選択をタイマで後回しにするようにしました。 Safari は onfocus イベントの中で select を使ってもテキストを選択できないためです。詳しくは Safari onfocus イベントで select してテキストを選択する方法 (改善案) を見てください。

$('#c')
  .keypress(function(e) {
      var code = typeof(e.charCode) != 'undefined'
        ? e.charCode : e.keyCode;
      if (!e.ctrlKey // Ctrl+?
        && !e.altKey // Alt+?
        && code != 0 // ?
        && code != 8 // BACKSPACE
        && code != 9 // TAB
        && code != 13 // Enter
        && (code < 48 || code > 57)) // 0..9
          e.preventDefault();
    })
  .focus(function() {
      var c = this.value;
      c = c.replace(/[^\d]/g, '');
      this.maxLength = 7;
      this.value = c;

      var self = this;
      setTimeout(function() {
        $(self).select();
      }, 10); // Safari
    })
  .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;
    });

Firefox は更新ボタンをクリックしたとき、入力ボックスの初期値ではなく、入力していたテキストを再表示します。Firefox は入力ボックスの値を記憶してしまうからです。今まではページをロードしたときに、ハイフン付きの郵便番号になるよう辻褄を合わせていましたが、ページをアンロードするときに辻褄を合わせる方法も有効であることがわかりました。

$(window).one('unload', function() {
  $('#c').blur();
});

今まではフォームの ID を明示して、入力ボックスがフォームに属することを前提としていましたが、入力ボックスからその属するフォームを探して、そのフォームが見つかったときだけ、onsubmit イベントを捕捉するようにしました。

$('#c').each(function() {
  var self = this;
  if (self.form) {
    $(self.form).submit(function() {
      $(self).blur();
    });
  }
});

残念ながらペーストに対するマスクは対応できていません。課題として継続します。

入力ボックスに郵便番号のマスクを適用する #2

関連情報