在做登录页面的时候,有客户提出,希望在输入上一个信息后,回车自动跳转到下一个输入框,
比如输入用户名后回车跳到密码框,输入密码后再回车即提交表单,
本来是一个很简单的事情,但是一碰到各种浏览器就变得复杂了。
天啊,什么时候天下浏览器都同一个标准啊。。。
在实现过程中,碰到两个问题,
首先是不同浏览器对按键的捕捉问题;
第二个是不同浏览器对控件 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);
}
}