您的位置:首页 > 其它

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

2011-07-20 09:58 288 查看
在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、火狐、遨游等浏览器.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: