UI改善（固定桁入力編）、の続き

http://asakura.g.hatena.ne.jp/asakura-t/20051014/1129302264

# secondlife 『onKeypress(onKeydown)でイベント拾って変更時にeventlistenerにfunction登録すれば望みの動作ができると思います。』

――とコメントをいただいたのでEventListenerについて調べたのですが、addEventListenerってのはどうやらInternet Explorerでは使えないみたいなんですな。

　まあでも、確かにonkeydownとonkeyupの両方のイベントをチェックして入力値が変更されたのかを確認すれば、[Tab]で移動したときにフォーカスを動かさなくて済みそうだ。んでも、全部の入力項目にonkeydownとonkeyupを書くなんて面倒なことをするのは嫌だしなぁ。

　……とか思っていたら、formのelementsから全入力要素を拾えるのを思い出した。

　じゃあtypeがtextでmaxlengthが設定されている要素にイベントを追加すればいいんじゃね？　ついでにnameを気にせずに次の要素を拾えるし。

　というわけで書いてみたのが以下のコード：

function auto_jump( form ) {
  var length_attr = "maxlength";
  for (var i=0; i < form.elements.length - 1; i++) {
    var elem = form.elements[i];
    if (! elem.type == "text") continue;
    if (! elem.getAttribute(length_attr)) continue;

    elem.next = form.elements[i+1];
    elem.onkeydown = function() {
      this.pre_value = this.value;
    }
    elem.onkeyup = function() {
      if (this.pre_value == this.value) return;
      if (this.value.length < this.getAttribute(length_attr)) return;
      this.pre_value = this.value;
      this.next.focus();
      if (this.next.type == "text") this.next.select();
    }
  }
}

　サンプルはこちら。

　JavaScriptは書き慣れてないのでどーにも野暮ったいですが*1。

　これなら既存のフォームに追加しやすいかな。

　それにしても意外だったのは「そんなのはココにあるよ！」って言われなかったことだ。

　うーむ。

*1：誰か添削して～、とか思わなくもない。