1. 程式人生 > >在表格中按上下左右鍵移動光標

在表格中按上下左右鍵移動光標

case [] -- disable pla 否則 scroll only 左右

//將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; }}

在表格中按上下左右鍵移動光標