js实现键盘选择html元素

原理：根据待选择元素与当前选中元素的最短距离来判断下一操作应该选中哪个元素。

 

代码如下：

/*
var arg = {
	elements:[],
	current:jqueryObj || index,//index is in elements
	initCallback: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){//left
			var temparr = filter(currentPosition,positionArr,LEFT);
			if(temparr.length > 0)
				current = getMinDistanceElem(currentPosition,temparr);
		}else if(this.keycode == 39){//right
			var temparr = filter(currentPosition,positionArr,RIGHT);
			if(temparr.length > 0)
				current = getMinDistanceElem(currentPosition,temparr);
		}else if(this.keycode == 38){//up
			var temparr = filter(currentPosition,positionArr,UP);
			if(temparr.length > 0)
				current = getMinDistanceElem(currentPosition,temparr);
		}else if(this.keycode == 40){//down
			var 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);	
		}
	}
}

 

 

示例见附件。