js 上下左右鍵控制焦點

 這篇文章主要是對js上下左右鍵控制焦點的示例代碼進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助

如下所示： 代碼如下: //begin---------------上下左右鍵控制   if('${iscontrol_mchntid}'.indexOf('${mchntid}')!=-1){   var texts = new Array(); //設置為focus所在的location var x = 2; var y = 3; var maxx = 0; var maxy = 0; window.onload=function(){ var inputs = $("[location]"); for(var i = 0; i < inputs.length; i++){ texts.push(inputs[i]); } for(var i = 0; i < texts.length; i++){ texts[i].onfocus = new Function("setCurrent('" + texts[i].getAttribute("location") + "')"); var crtx = parseInt(texts[i].getAttribute("location").split(",")[0]); var crty = parseInt(texts[i].getAttribute("location").split(",")[1]); maxx = maxx < crtx ? crtx : maxx; maxy = maxy < crty ? crty : maxy; texts[i].onkeydown = function(e){ e = e || window.event; switch(e.keyCode){ case 38:setPosition(x,y,38);break;// 上 case 40:setPosition(x,y,40);break;// 下 case 37:setPosition(x,y,37);break;// 左 case 39:setPosition(x,y,39);break;// 右 case 45:setPosition(x,y,45);break; // Insert鍵/返回鍵 在輸入框裡是刪除且輸入庫有值時是刪除 其他為返回上一頁 default:return true; } };  } }; function setPosition(x,y,keyCode){   //此處加入動態改變位置的邏輯----begin  //上下時，只改動y坐標，x坐標自動改變 //左右時，只改動x坐標，y坐標自動改變 if(keyCode == '38' && x == '3'){ if(y=='3'||y=='4'||y=='5'||y=='6'||y=='7'||y=='8'){ y='3'; } } if(keyCode == '40' && x == '4'){ if(y=='3'||y=='4'||y=='5'||y=='6'||y=='7'||y=='8'){ y='3'; } } //此處加入動態改變位置的邏輯----end   if(keyCode == '38'){ x = --x;  } if(keyCode == '40'){ x = ++x;  } if(keyCode == '37'){ y = --y;  } if(keyCode == '39'){ y = ++y;  } movePosition(x,y,keyCode); } function movePosition(x1,y1,keyCode){ if(keyCode == '45'){ //光標所在的對象是input時 var st = x1+","+y1; if($("input[location='"+st+"']").attr("type")=="text"){ var oldval = $("input[location='"+st+"']").val(); var newval = oldval.substring(0,oldval.length-1); $("input[location='"+st+"']").val(newval); return false; }else{ history.go(-1);  return false; } } x1 = x1 > maxx ? 1 : x1; y1 = y1 > maxy ? 1 : y1; x1 = x1 < 1 ? maxx : x1; y1 = y1 < 1 ? maxy : y1;   var j = 0; for(; j < texts.length; j++){ if(texts[j].getAttribute("location") == x1 + "," + y1){  texts[j].focus(); break; } }  if(j == texts.length){ switch(keyCode){ case 38:movePosition(--x1,y1,keyCode);break;// 上 case 40:movePosition(++x1,y1,keyCode);break;// 下 case 37:movePosition(x1,--y1,keyCode);break;// 左 case 39:movePosition(x1,++y1,keyCode);break;// 右 } } }  function setCurrent(location){ x = location.split(",")[0]; y = location.split(",")[1]; } } //end---------------上下左右鍵控制