js 上下左右鍵控制焦點(範例程式碼)_javascript技巧

如下：

複製程式碼 程式碼如下:

//begin-- -------------上下左右鍵控制

if('${iscontrol_mchntid}'.indexOf('${mchntid}')!=-1){

var texts = new Array();
//設定為focus所在的location
var x = 2;
var y = 3;
var maxx = 0;
var y = 3;
var maxx = 0;
var maxy = 0;
window.onload=function(){
var inputs = $("[location]");
for(var i = 0; i texts.push(inputs[i]);
}
for(var i = 0; 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 maxy = maxx maxy = 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 y1 =x1 = x1 y1 = y1
var j = 0;
for(; 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--- ------------上下左右鍵控制