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

            项目中遇到用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交互界面易用性设计和验收的指导性原则 仅供参考学习。

    总结：项目中总会遇到各种各样的问题，有问题不可怕，可怕的是不努力想办法去解决它，而是消极应对。把每一个问题当作一次学习、提高的机会，这样的项目驱动才是真正我们要达到的目的，才刚刚开始做项目，保持一份积极的态度去学习、研究，抓住每一次的学习机会，项目即是学习。

    文中的问题伴随了我几天的时间，最后通过自己的努力解决，其实更重要的收获是改变了一些我的观念，让自己始终保持兴奋的状态去抓住身边每个学习的机会。