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---------------上下左右键控制