Tab键、方向键切换页面控件焦点

最后更新于:2022-04-01 10:13:02

项目中遇到用Tab键、方向键切换页面控件焦点的问题,Tab键控制比较容易实现,只要依次在想要控制焦点顺序的控件标签上添加属性TabIndex和TabStop两个属性,TabIndex属性值从1开始根据控制顺序依次递增,TabStop值设为"True"。而要实现方向键的控制,还是费了一番周折。 首先从网上查找资料,得到一个获取页面所有Input类型控件的方法: http://www.poluoluo.com/jzxy/201208/172374.html 但经过尝试,这种方法并不能解决页面中存在其他类型控件的问题,比如碰到select类型控件时,焦点切换就会出现混乱,以至于达不到想要的效果。 寻找利用其他方法获取页面中的元素,最后根据前辈提示,可以利用JQuery的选择器来实现,JQuery当时还没有接触,所以找了相关资料,解决了此问题,改进后的JS代码如下(以下是两列输入或选择控件,竖向切换焦点情况的实现): ~~~ function keyDown(event) { var inputs = $(".txt") var focus = document.activeElement; if (!document.getElementById("mm").contains(focus)) return; var event = window.event || event; var key = event.keyCode; for (var i = 0; i < inputs.length; i++) { if (inputs[i] === focus) { break; } } switch (key) { case 38: if (i - 2 >= 0) inputs[i - 2].focus(); break; case 40: if (i + 2 < inputs.length) inputs[i + 2].focus(); break; case 13: event.returnValue = false;//阻止自动提交 if (i + 2 < inputs.length) inputs[i + 2].focus(); break; } } ~~~ 只需在html代码中引进JQuery,并在需要获取的元素中设置class值为"txt"即可获取所有控件。但还是存在不足,当页面中有disabled属性为true的情况下,使用方向键也会出现错乱的情况。再次进行改进,加入必要逻辑判断,最终得出如下结局方案: ~~~ //方向键控制页面控件焦点移动 function keyDown(event) { var inputs = $(".txt") //通过class属性值获取控件组合 var focus = document.activeElement; //得到处于激活状态的控件 if (!document.getElementById("mm").contains(focus)) return; //判断是否包含激活控件在指定的Table下 var event = window.event || event; //获取事件 var key = event.keyCode; //得到按下的键盘Ascii码 var flag = -1; //得到激活控件在组合中的具体位置 for (var i = 0; i < inputs.length; i++) { if (inputs[i] === focus) { break; } } switch (key) { case 38: //向上键 var j = i - 2; var flag = false; if (inputs.get(j).disabled == false) { //判断接下来得到的焦点控件是否能够使用 flag = true; } else { for (j=i-4; j >= 0; j=j-2) { //之后控件不能获得焦点情况下寻找下一个控件 if (inputs.get(j).disabled == false) { //判断之后焦点是否可以获取焦点 flag = true; break; } } } if (flag) { inputs[j].focus(); } break; case 40: //向下键 var j = i + 2; var flag = false; if (inputs.get(j).disabled == false) { //判断接下来得到的焦点控件是否能够使用 flag = true; } else { for (j = i + 4; j < inputs.length; j = j + 2) { //之后控件不能获得焦点情况下寻找下一个控件 if (inputs.get(j).disabled == false) { //判断之后焦点是否可以获取焦点 flag = true; break; } } } if (flag) { inputs[j].focus(); } break; case 13: //回车键 event.returnValue = false; //阻止自动提交 var j = i + 2; var flag = false; if (inputs.get(j).disabled == false) { flag = true; } else { for (j = i + 4; j <= inputs.length - 1; j = j + 2) { if (inputs.get(j).disabled == false) { flag = true; break; } } } if (flag) { inputs[j].focus(); } break; } } ~~~ 至此,解决了实现中存在的主要问题,考虑到左右方向键可以在输入字符中切换光标位置,则在处理过程中没有加入左右键切换控件焦点的功能。回想用户提出此功能的需求,同设计软件一致,是要提高工作效率,避免鼠标、键盘之间的来回切换,也由此找到一份[WEB交互界面易用性设计和验收的指导性原则](http://blog.csdn.net/mz24/article/details/413028)仅供参考学习。 总结:项目中总会遇到各种各样的问题,有问题不可怕,可怕的是不努力想办法去解决它,而是消极应对。把每一个问题当作一次学习、提高的机会,这样的项目驱动才是真正我们要达到的目的,才刚刚开始做项目,保持一份积极的态度去学习、研究,抓住每一次的学习机会,项目即是学习。 文中的问题伴随了我几天的时间,最后通过自己的努力解决,其实更重要的收获是改变了一些我的观念,让自己始终保持兴奋的状态去抓住身边每个学习的机会。
';