在网页中如何使方向键控制光标移动

Question

在网页中,填好一格(input控件)后需用鼠标点击下一格才能进行填写，而不能用方向键控制光标。由于月报中需要填写的内容很多，频繁使用鼠标点击较为不便。
希望能改进后，像Excel表格一样，在填表时可用方向键控制光标上下左右移动。

Answer 1

// 移动光标
function doMoveCursor(oldStr , num, operate){
var vStrMid = oldStr.substring(0, oldStr.lastIndexOf("-"));
var vStrEnd = oldStr.substring((oldStr.lastIndexOf("-")+1));
var vNewStr = "";
var flag = false;
if("row" == operate){
vNewStr = num + "-" + vStrEnd;
}else{
vNewStr = vStrMid + "-" + num;
}
if(document.getElementById(vNewStr)){
if(false == document.getElementById(vNewStr).contentEditable){
flag = false;
}else if("false" == document.getElementById(vNewStr).contentEditable){
flag = false;
}else{
document.getElementById(vNewStr).focus();
flag = true;
}
}
return flag ;
} // 通过方向控制键移动光标
function moveFocus(obj){
// 取方向键的 key 的ascii码
var key = window.event.keyCode;
// 取当前的控件所在行和列
var curRow = parseInt(window.event.srcElement.rowId);
var curCol = parseInt(window.event.srcElement.colId);
var curId = window.event.srcElement.id;
// 往左移
if(37 == key){
for(var i = (curCol - 1) ; i >=0 ; i --){
    if(doMoveCursor(curId, i, "col" )){
     break ;
}
}
}
// 往右移
if(39 == key){
for(var i = (curCol + 1) ; i <= 10 ; i++){
if(doMoveCursor(curId, i, "col" )){
     break ;
}
}
}
// 往上移
if(38 == key ){
for(var i = (curRow - 1) ; i >=0 ; i --){
if(doMoveCursor(curId, i, "row" )){
     break ;
}
}
}
// 往下移
if(40 == key){
for(var i = (curRow + 1 ) ; i <= 60 ; i++){
if(doMoveCursor(curId, i, "row" )){
     break ;
}
}
}
}
-- 同时在面页上以 1-1 1-2 1-3 编写 id 号

Answer 2

用 HTML 的 tabindex 属性编好顺序，按 tab 键就能逐个逐个跳了。