当前位置: 代码迷 >> Web前端 >> 网页中,模拟tab健或按回车更替输入焦点(兼容多中浏览器,ie,遨游,火狐)
  详细解决方案

网页中,模拟tab健或按回车更替输入焦点(兼容多中浏览器,ie,遨游,火狐)

热度:282   发布时间:2013-11-18 11:57:15.0
网页中,模拟tab健或按回车更换输入焦点(兼容多中浏览器,ie,遨游,火狐)
在ie6-8中当用户按下回车键,若我们不希望网页提交而希望其是更换焦点有两个方法:
方法一:每个控件的keydown事件写个跳转方法。(个人总结:麻烦,当输入框多时更麻烦)。
方法二:在doucument.keydown中处理,如下:
  document.keydown = function()
{
   if (event.keyCode == 13) event.keyCode = 9 ;
}


这种方法有效,方便。
但到了ie9问题出来了,ie9由于标准化了,在ie9次方法不行了,其他浏览器更不行。


因笔者以前已经使用了第二种方法跳转,要重新吗每个页面每个控件的keydown事件写代码跳转(输入页面太多),简直会疯狂。
后经研究,可用以下方法解决,以后只需引用即可。

//检查控件是否可见
function checkobjvisual(e) {


    var objvis = false;
    if (e) {
        if (e.offsetHeight > 0) {
            objvis = true;
        }
        if (e.offsetTop > 0) {
            objvis = true;
        }
        
         if (e.readOnly == true) {
             objvis = false;  
       }  
      
    }
    return objvis;
}

//查找下一个控件
function focunext(next_id) {


    var code;
    if (!e) {
        var e = window.event;
    }
    if (e.keyCode) {
        code = e.keyCode;
    }
    else if (e.which) {
        code = e.which;
    }
    if (code == 13) {


        if (next_id)
        {document.getElementById(next_id).focus(); }
        else {
            var inputList = document.getElementsByTagName("input");
            // 循坏这个集合,包括了所有的input。
            var nextindex;
            nextindex = -1;
            for (i = 0; i < inputList.length; i++) {
                if (inputList[i] == document.activeElement) {
                    var acobj = document.activeElement;
                    nextindex = i + 1;
                    
                    while ((!checkobjvisual(inputList[nextindex])) && (nextindex <= inputList.length)) {
                        nextindex = nextindex + 1;
                    }
                    if (inputList[nextindex])  inputList[nextindex].focus();
                    break;
                }
            }
            
        }
    }
}




document.onkeydown = function(e) {


    var code;
    if (!e) {
        var e = window.event;
    }
    if (e.keyCode) {
        code = e.keyCode;
    }
    else if (e.which) {
        code = e.which;
    }


    if (code == 8) {
        if (document.activeElement.readOnly == true || document.activeElement.disabled == true)
        { return false; }
    }


    if (code == 13) {
        if (document.activeElement.type == "textarea") {
            return;
        }
        if (document.activeElement.type != "submit" && document.activeElement.type != "button") {
 
            // event.keyCode = 9;
            focunext();
            return false;
        }
    }
}



把上面的函数放在文件,再在网页上引用此script文件。以后会发现回车键就会自动更换焦点。且此方法兼容IE、火狐、遨游等浏览器.

  相关解决方案