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.οnlοad=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---------------上下左右键控制

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在前端实现上下左右方向控制,可以通过监听`keydown`事件来实现。具体步骤如下: 1. 给需要控制的元素添加`tabindex`属性,让其可以获取焦点。 2. 给该元素绑定`keydown`事件,监听方向的按下。 3. 在`keydown`事件处理函数中,根据按下的方向修改元素的位置或状态。 4. 需要注意的是,在处理方向时,要阻止浏览器默认的滚动行为。 以下是一个简单的示例代码,实现了通过方向控制一个小方块的上下左右移动: ```html <div id="box" tabindex="0"></div> ``` ```css #box { width: 50px; height: 50px; background-color: red; position: absolute; top: 0; left: 0; } ``` ```javascript const box = document.getElementById('box'); const step = 10; box.addEventListener('keydown', e => { switch (e.keyCode) { case 37: // 左箭头 e.preventDefault(); // 阻止默认行为 box.style.left = `${parseInt(box.style.left) - step}px`; // 修改位置 break; case 38: // 上箭头 e.preventDefault(); box.style.top = `${parseInt(box.style.top) - step}px`; break; case 39: // 右箭头 e.preventDefault(); box.style.left = `${parseInt(box.style.left) + step}px`; break; case 40: // 下箭头 e.preventDefault(); box.style.top = `${parseInt(box.style.top) + step}px`; break; } }); ``` 在这个示例中,我们首先给小方块添加了`tabindex`属性,让其可以获取焦点。然后,在`keydown`事件处理函数中,我们根据按下的方向修改小方块的位置,同时阻止了浏览器的默认滚动行为。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值