在表格中按上下左右键移动光标
Posted rey888
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在表格中按上下左右键移动光标相关的知识，希望对你有一定的参考价值。
//将input中加入属性data-col=‘x-y‘
function getXy(el){
if(el != null&&el.length != 0 && el.attr("data-col")!= null){
var attr = el.attr("data-col");
var temp = attr.split("-");
var arr = [];
arr.push(parseInt(temp[0]));
arr.push(parseInt(temp[1]));
return arr;
}
return [1,4];
}
function isMove(el){
var isReadonly = el.attr("readonly");
var isDisabled = el.attr("disabled");
var isHide = el.parent().parent().css("display");
return isReadonly=="readonly"||isDisabled=="disabled"||"none"==isHide;
}
function moveLeft(row,line){
if(line <= 1){
return
}
var el = $("input[data-col=‘"+row+"-"+(--line)+"‘]");
console.log(el);
if(isMove(el)){//如果选中元素是readonly或者disabled=true则减少一位继续使用此方法发
moveLeft(row,line);
return;
}
el.focus();
}
function moveRight(row,line){
if(line >= 13){
return
}
var el = $("input[data-col=‘"+row+"-"+(++line)+"‘]");
console.log(el);
if(isMove(el)){//如果选中元素是readonly或者disabled=true则减少一位继续使用此方法发
moveRight(row,line);
return;
}
el.focus();
}
function moveTop(row,line){
if(row <= 1){
return
}
var el = $("input[data-col=‘"+(--row)+"-"+(line)+"‘]");
console.log(el);
if(isMove(el)){//如果选中元素是readonly或者disabled=true则减少一位继续使用此方法发
moveTop(row,line);
return
}
el.focus();
}
function moveDown(row,line){
var max = $("#tbodyMx").find("tr").length;
if(row >= max){
return
}
var el = $("input[data-col=‘"+(++row)+"-"+(line)+"‘]");
console.log(el);
if(isMove(el)){//如果选中元素是readonly或者disabled=true则减少一位继续使用此方法发
moveDown(row,line);
return
}
el.focus();
}
document.onkeydown=function(e){
var e=window.event||e;
if(e.keyCode!= 37&&e.keyCode!= 38&&e.keyCode!= 39&&e.keyCode!= 40){
return;
}
var el = $("input:focus");
if(el==null || el.length == 0 || el.attr("data-col")==null){
$("[data-col=‘1-4‘]").focus();
return;
} //根据光标所在的元素获得一个两位长度的数组，第一个是行，第二个是列，如果光标不存在元素或者元素不是指定元素则光标默认到第一个元素上面 var arr = getXy(el); var row = arr[0]; var line = arr[1]; if(line == 2||line == 1||line==3||line==4){ $("#spmx").scrollLeft(0); } switch(e.keyCode){ case 37: //左 //如果列为0，则无需变动光标位置，否则找到列比本元素的列小一个的位置 moveLeft(row,line); break; case 38: //上 //如果行为0则无需变动，否则移动到比当前行少一位的位置 moveTop(row,line); break; case 39: //右 //如果列为最大值则不需变动，否则向右移动一个位置 moveRight(row,line); break; case 40: //下 //如果行为最大值则无需变动，否则向下移动一个位置 moveDown(row,line); break; }}以上是关于在表格中按上下左右键移动光标的主要内容，如果未能解决你的问题，请参考以下文章
做excel表格时，键盘上的上下左右键不能起到跳格作用，只会在一个格子里移动，为啥呢？