网页中,模拟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、火狐、遨游等浏览器.
方法一:每个控件的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、火狐、遨游等浏览器.
相关文章推荐
- js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
- jQuery控制文本框只能输入数字[兼容IE、火狐等浏览器]
- 把网页变成黑白(兼容谷歌、火狐、IE等浏览器)
- [哀悼雅安芦山地震]把网页由彩色变成灰度(谷歌、火狐、ie等浏览器兼容)
- 在网页中插入FLV视频,经测试兼容IE、火狐、谷歌等浏览器
- Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
- Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
- Enter回车切换输入焦点方法兼容各大浏览器
- 完美兼容火狐ie等主流浏览器回车键登录方法
- Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
- 网页中播放Mp3(兼容火狐,谷歌,ie主要浏览器)
- JSP中用回车监听按钮事件兼容火狐 IE等主流浏览器
- [哀悼芦山地震]把网页变成黑白(谷歌、火狐、ie等浏览器兼容)
- [哀悼雅安芦山地震]把网页由彩色变成灰度(谷歌、火狐、ie等浏览器兼容)
- JSP中用回车监听按钮事件兼容火狐 IE等主流浏览器
- 兼容ie 火狐 谷歌等各大浏览器css hack代码总结
- 设为首页加入收藏兼容360/火狐/谷歌/IE/搜狗/猎狐/Safari/等主流浏览器的代码
- 兼容IE火狐的回车
- js回车监听按钮事件(火狐IE 兼容)