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 (); }) ();