在做登录页面的时候,有客户提出,希望在输入上一个信息后,回车自动跳转到下一个输入框,
比如输入用户名后回车跳到密码框,输入密码后再回车即提交表单,
本来是一个很简单的事情,但是一碰到各种浏览器就变得复杂了。
天啊,什么时候天下浏览器都同一个标准啊。。。
在实现过程中,碰到两个问题,
首先是不同浏览器对按键的捕捉问题;
第二个是不同浏览器对控件 click 事件提交的支持不一样,如火狐等不支持JS触发click事件提交。解决方法是调用asp.net的 __doPostBack('lkb_login', '') 方法提交表单。
最后实现如下:
var Sys = {}; var ua = navigator.userAgent.toLowerCase(); if (window.ActiveXObject) Sys.ie = true; else if (ua.indexOf("chrome") != -1) Sys.chrome = true; else if (ua.indexOf("firefox") != -1) Sys.firefox = true; function EnterClick(e) { var code; if (!e) { var e = window.event; } if (e.keyCode) { code = e.keyCode; } else if (e.which) { code = e.which; } if (code == 13) { var sender = e.target || e.srcElement; if (!!sender && sender.id == "lkb_login") return true; if (Trim(document.getElementById("txt_username").value) == "请输入昵称/Email/手机" || Trim(document.getElementById("txt_username").value) == "请输入会员卡号") { document.getElementById("txt_username").value = ""; document.getElementById("txt_username").select(); } else if (Trim(document.getElementById("txt_username").value) == "") { document.getElementById("txt_username").value = ""; document.getElementById("txt_username").select(); } else if (Trim(document.getElementById("txt_pwd").value) == "") { document.getElementById("txt_pwd").focus(); } else { //2012.11.06 回车提交 // if (window.ActiveXObject) // document.getElementById("lkb_login").click(); // else // document.getElementById("lkb_login").focus(); document.getElementById("imgLogin").style.display = "none"; document.getElementById("div_login_tip").style.display = "block"; __doPostBack('lkb_login', ''); } return false; } return true; } if (Sys.ie || Sys.chrome) { document.onkeydown = function(e) { return EnterClick(e); } } else { document.onkeypress = function(e) { return EnterClick(e); } }