TreeWalkerを使ってフォームの中の要素をエンターキーで移動する(書き換え中)

なんとなくだが過去に教えていただいたものが蘇る
最近は、このUIは嫌われたか忘れ去られたか。


(function () {

  
  function filter (n) {
    switch (n.tagName) {
    
    case 'INPUT' :
      if ('hidden' === n.type) break;
    case 'TEXTAREA' :
    case 'SELECT' :
      if (n.disabled) break;
      if (n.readOnly) break;
      return NodeFilter.FILTER_ACCEPT;
    }
    
    return NodeFilter.FILTER_SKIP;
  }

  
  function getStartNode () {
    this.currentNode = this.root;
    return this.firstChild ();
  }


  function getEndNode () {
    this.currentNode = this.root;
    return this.lastChild ();  
  }
  

  function handleEvent (event) {
    var e      = event.target;
    var walker = this.walker;

    if (! /INPUT|TEXTAREA|SELECT/.test (e.tagName)) return;

    switch (event.keyCode) {
    
    case 27 :
      return e.blur ();

    case 13 :
      if (event.ctrlKey) {
        switch (e.type) {
        
        case 'radio' : case 'checkbox' :
          e.checked = ! e.checked;
        case 'submit' : case 'reset' : case 'button' :
        case 'textarea' : case 'select' :
          break;
        }
      }
      else {
        walker.currentNode = e;
        n = event.shiftKey
        ? walker.previousNode () || getEndNode.call (walker)
        : walker.nextNode ()     || getStartNode.call (walker);
        n.focus ();
      }
    }
  }
  


  function init () {
    document.addEventListener ('keypress', this, false);

    this.walker = document.createTreeWalker (
      this.root,
      NodeFilter.SHOW_ELEMENT,
      filter,
      true
    );
    
  }

  //________________________________
  
  var root = document.querySelector ('form:nth-of-type(1)');

  var KeyHandler = new Object;

  KeyHandler.handleEvent  = handleEvent;
  KeyHandler.root         = root;
  KeyHandler.disabled     = false;
  KeyHandler.walker       = null;
  KeyHandler.init         = init;
  
  KeyHandler.init ();

}) ();