js 键盘控制表格input上下左右移动

最新推荐文章于 2024-03-22 17:16:47 发布

原创最新推荐文章于 2024-03-22 17:16:47 发布 · 8.3k 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

45 篇文章

订阅专栏

这篇博客介绍了一种方法，通过JavaScript监听键盘事件，实现用户在表格中的输入框间上下左右移动焦点。当按下键盘的左、上、右、下箭头键时，当前激活的输入框会相应地改变位置。代码中定义了`keyDown`和`changeItem`两个函数，分别处理键盘事件和切换输入框焦点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//初始化获取的行列
var currentLine= 0;
var currentCol=0;

function keyDown(obj){
   var _row = obj.parentNode;

   currentCol = _row.cellIndex;
   currentLine = _row.parentNode.rowIndex;
   e=window.event||e;
      switch(e.keyCode){
        case 37: //左键
          currentCol--;
          changeItem();
          break;
        case 38: //向上键
          currentLine--;
          changeItem();
          break;
        case 39: //右键
          currentCol++;
          changeItem();
          break;
        case 40: //向下键
          currentLine++;
          changeItem();
          break;
        default:
          break;
      }
}

//方向键调用
function changeItem(){
if(document.all)
    var it=document.getElementByIdx("specificationsTable").children[0];
else
    var it=document.getElementById("specificationsTable");

if(currentLine<0){
    currentLine=it.rows.length-1;
}
if(currentLine==it.rows.length){
currentLine=0;
}
var objtab=document.all.specificationsTable;
var objrow=objtab.rows[currentLine].getElementsByTagName("INPUT");
if(currentCol<0){
    currentCol=objrow.length-1;
}else if(currentCol==objrow.length){
    currentCol=0;
}
objrow[currentCol].select();

}
</script>