批量录入表格中回车事件处理

JavaScript事件处理：焦点切换与键盘导航

原创已于 2022-10-27 14:38:35 修改 · 437 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #javascript #java

于 2022-10-21 09:44:46 首次发布

开发语言专栏收录该内容

61 篇文章

订阅专栏

这篇博客探讨了JavaScript中的事件处理函数`transEnter`，它主要用于处理回车键触发的事件，实现表格中输入控件的焦点切换。通过获取当前单元格并遍历相邻单元格，函数能够在按下回车键时将焦点移到下一个合适的输入字段，即使跨越了行边界。此功能对于创建无障碍的键盘导航界面至关重要。

界面布局:

脚本函数:

function transEnter(sender) {

if (event.keyCode == 13) {
var senderId = sender.getAttribute('id');
               var ptr = $("#" + senderId);//当前行
               var ptb = $("#" + senderId);//当前单元格
               while (ptr.get(0).tagName != "TR") {
                   ptr = ptr.parent();
               }
               while (ptb.get(0).tagName != "TBODY") {
                   ptb = ptb.parent();
               }
               //计算当前触发控件所在单元格索引
               var tdindex = 0;
               for (var i = 0; i < ptr.children('td').length; i++) {
                   var unknowobj = ptr.children('td').eq(i);
                   if(unknowobj.children(":text").length ==1)
                   {
                       var id = unknowobj.children(":text").attr('id');
                       if (id == sender.id) {
                           tdindex = i;
                           break;
                       }
                   }

               }
               console.log("tdindex",tdindex); //找到正确的tdindex
               console.log("ptr.children('td').length",ptr.children('td').length);

               //获取当前单元格
               var unknowobj = ptr.children('td').eq(tdindex + 1);

               while(unknowobj.children(":text").length == 0)//判断当前单元格是否包含输入控件
               {
                   tdindex = tdindex + 1;
                   unknowobj = ptr.children('td').eq(tdindex + 1);//找下一个单元格
                   console.log(unknowobj.children(":text").length);
                   if(ptr.children('td').length == tdindex)//如果当前行的最后一个单元格已经检索完成
                   {
                       //更换行对象
                       if(ptr.index() + 1 < ptb.children('TR').length -1)//当前行不是最后一行
                       {
                           ptr = ptb.children('TR').eq(ptr.index() + 1);//切换下一行
                           tdindex = 0;//td从0开始
                           unknowobj = ptr.children('td').eq(tdindex);   //更换单元格
                       }
                       else{//全部行处理完成
                           break;
                       }
                   }
               }
               if(unknowobj.children(":text").length ==1){
                   var id = unknowobj.children(":text").attr('id');
                   console.log("obj.id", id);
                   unknowobj.children(":text").focus();
               }
               return false;
}
return true;
}

//激发代码

"onkeydown", "return transEnter(this);"