手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js 上下左右键控制焦点(示例代码)
js 上下左右键控制焦点(示例代码)
摘要:如下所示:复制代码代码如下://begin---------------上下左右键控制if('${iscontrol_mchntid}'.i...

如下所示:

复制代码 代码如下:

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

【js 上下左右键控制焦点(示例代码)】相关文章:

javascript的 {} 语句块详解

获取对象

超酷右下浮出广告窗口代码

根据内容自动调整弹出窗口大小的JS解决方案

js实现异步循环实现代码

对联广告 可关闭

一些有关检查数据的JS代码

javascript实现table选中的行以指定颜色高亮显示

JavaScript基本数据结构

javascript实现控制的多级下拉菜单

精品推荐
分类导航