js 上下左右键控制焦点(示例代码)

前端技术 2023/09/04 JavaScript

如下所示:

复制代码 代码如下:

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

本文地址:https://www.stayed.cn/item/10411

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。