Web页面Enter支持TAB键转换--提交数据
转自别人的，留着自己学习用，也可以分享给大家。
插曲：
自己负责的西城环保项目的登录页面，之前全部用鼠标和键盘操作，甚是不方便。
前天改为输入完username、password后，按回车键验证用户登录。期间可以和键盘的TAB键配合使用，效果更好。
今天经理又要全部使用Enter操作整个流程，我发现就Baidu的登录有使用外，Google、Yahoo、Sina都没有使用，
毕竟那样不合习惯。但经理一发话，我一个基层员工就得照做呀，除非我自己是老板，O(∩_∩)O~
摘要：
我现在以常见的WEB登录页面为案例，讲解Enter键如何支持TAB键转换及提交数据。
假设登录页面为login.htm，里面有<body>、<form>、<input type="*">等控件。
现在需求是登录页面username自动获取焦点，然后按Enter焦点自动移到password里，
最后按Enter提交验证用户数据登录。
正文代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> <title>系统登录</title> <link href="css/login.css" rel="stylesheet" type="text/css" />
<script src="JS/DialogJS/ymPrompt.js" type="text/javascript"></script>
<link rel="stylesheet" id='skin' type="text/css" href="JS/DialogJS/skin/qq/ymPrompt.css" />
<script src="JS/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript"> <!-- var jq = jQuery.noConflict(); jq(function() { jq('#btnCancel').click(function() { jq("#myName").val(""); jq("#myPsd").val(""); }); jq('#btnLogin').click(function() { var name = jq('#myName').val(); var psd = jq('#myPsd').val(); if (name == '') ymPrompt.alert('用户名不能为空！', null, null, '提示信息', null); else { //登录信息 jq.ajax({ type: "GET", data: { UserName: name, UserPsd: psd }, url: "tree.aspx?mode=LoginOn", dataType: "json", cache: false, success: function(data) { if (data.Success == "true") { location = "Default.aspx"; } else ymPrompt.errorInfo('您输入的用户名或密码有误！', null, null, '错误信息', null); } }); } ymPrompt.close(); }); })
function GetEnterFocus() { document.getElementById("myName").focus(); document.getElementById("myName").select(); document.getElementById("myName").onkeyup = GetNextInput; document.getElementById("myPsd").onkeyup = GetNextInput; }
function GetNextInput() { if (event.keyCode == 13) { if (event.srcElement == document.getElementById("myName")) { document.getElementById("myPsd").focus(); document.getElementById("myPsd").select(); } if (event.srcElement == document.getElementById("myPsd")) { event.returnValue = false; event.cancel = true; document.getElementById("btnLogin").click(); return false; } } }
//Enter提交账号密码 // function document.onkeydown() { // if (event.keyCode == 13) { // event.returnValue = false; // event.cancel = true; // document.getElementById("btnLogin").click(); // return false; // } // } --> </script> </head> <body onload="javascript:GetEnterFocus();"> <!--action="Login.htm" method="post"--> <form id="form1"> <table width="100%" height="254" border="0" cellspacing="0"> <tr> <td height="21"> <input type="text" id="myName" class="dengluming" /> </td> </tr> <tr> <td height="21"> <input type="password" id="myPsd" class="dengluming" /> </td> </tr> <tr> <td height="49"> <table border="0" cellspacing="0" style="margin-left: 235px"> <tr> <td> <a href="#" id="btnLogin" class="login_btn">登 录</a> </td> <td> <a href="#" id="btnCancel" class="login_btn">取 消</a> </td> </tr> </table> </td> </tr> </table> </form> </body> </html>
【感谢goodsong（风卷残云~不要把简单的事搞得N复杂 提供思路】
浙公网安备 33010602011771号