js实现键盘选择html元素
原理：根据待选择元素与当前选中元素的最短距离来判断下一操作应该选中哪个元素。
?
代码如下：
/*var arg = {elements:[],current:jqueryObj || index,//index is in elementsinitCallback:function(){},moveCallback:function(){},ensureCallback:function(){}};*/function KeyMove(arg){var LEFT = 1,RIGHT = 2,UP = 3,DOWN = 4;function filter(current,arr,direction){var resultarr = [];if(direction == LEFT){for(var i=0,len=arr.length;i<len;i++){if(arr[i]["left"] + arr[i]["width"] < current["left"] && arr[i]["width"] > 0){resultarr.push(arr[i]);}}}else if(direction == RIGHT){for(var i=0,len=arr.length;i<len;i++){if(arr[i]["left"] > current["left"] + arr[i]["width"] && arr[i]["width"] > 0){resultarr.push(arr[i]);}}}else if(direction == UP){for(var i=0,len=arr.length;i<len;i++){if(arr[i]["top"] + arr[i]["height"]< current["top"] && arr[i]["height"] > 0){resultarr.push(arr[i]);}}}else if(direction == DOWN){for(var i=0,len=arr.length;i<len;i++){if(arr[i]["top"] > current["top"] + arr[i]["height"] && arr[i]["height"] > 0){resultarr.push(arr[i]);}}}return resultarr;}//{top:"",left:""}var elemarr = arg.elements;var positionArr = new Array(elemarr.length);for(var i=0,len=elemarr.length;i<len;i++){positionArr[i] = $(elemarr[i]).position();positionArr[i].index = i;positionArr[i].width = $(elemarr[i]).width();positionArr[i].height = $(elemarr[i]).height();}var current = isNaN(arg.current) ? arg.current : elemarr[arg.current];var _arg = {current:null,pre:null,e:null};var $pre = _arg.current = _arg.pre = $(current);if(typeof arg.initCallback == "function")arg.initCallback.call(_arg);var currentPosition = $(current).position();currentPosition.width = $(current).width();currentPosition.height = $(current).height();addListener(function(){_arg.e = this.e;if(this.keycode == 37){//leftvar temparr = filter(currentPosition,positionArr,LEFT);if(temparr.length > 0)current = getMinDistanceElem(currentPosition,temparr);}else if(this.keycode == 39){//rightvar temparr = filter(currentPosition,positionArr,RIGHT);if(temparr.length > 0)current = getMinDistanceElem(currentPosition,temparr);}else if(this.keycode == 38){//upvar temparr = filter(currentPosition,positionArr,UP);if(temparr.length > 0)current = getMinDistanceElem(currentPosition,temparr);}else if(this.keycode == 40){//downvar temparr = filter(currentPosition,positionArr,DOWN);if(temparr.length > 0)current = getMinDistanceElem(currentPosition,temparr);}else if(this.keycode == 13){if(typeof arg.ensureCallback == "function")arg.ensureCallback.call(_arg);}currentPosition = $(current).position();currentPosition.width = $(current).width();currentPosition.height = $(current).height();_arg.current = $(current);if(typeof arg.moveCallback == "function")arg.moveCallback.call(_arg);_arg.pre = $pre = $(current);});function getMinDistanceElem(current,arr){var index = 0;var minDistance = 1000000;for(var i=0,len=arr.length;i<len;i++){var tempdistance = distance(current,arr[i]);if(tempdistance < minDistance){index = i;minDistance = tempdistance;}}return elemarr[arr[index].index];}function distance(o1,o2){return Math.sqrt(Math.pow(o1.left - o2.left,2) + Math.pow(o1.top - o2.top,2));}function addListener(fn){if(typeof fn == "function"){document.addEventListener("keydown",function(event){//IE doesn't pass in the event object var event = event || window.event; //IE uses srcElement as the target var target = event.target || event.srcElement; var keycode = event.keyCode || event.which;this.target = target;this.keycode = keycode;this.e = event;fn.call(this);},false);}}}??
示例见附件。