要實現功能:在input框中輸入text后直接按enter也可提交表單
示例如下:
1、html頁面
<form id="fm" action="#" name="ThisForm" method="post"> <TABLE border="0" cellSpacing="0" cellPadding="0" width="100%"> <TR> <TD style="HEIGHT:18px"><span id="msg" style="color:red;font-size:15px">${msg}</span></TD> </TR> <TR> <TD style="HEIGHT: 30px"> <span style="font-family: 微軟雅黑;font-size: 13px;">賬號:</span> <INPUT type="text" id="userName" name="userName" style="width: 110px;"> </TD> </TR> <TR> <TD style="HEIGHT: 30px"> <span style="font-family: 微軟雅黑;font-size: 13px;"> 密碼:</span> <INPUT type="password" id="userPw" name="userPw" style="width:110px;"> </TD> </TR> <TR> <TD style="HEIGHT: 50px"> <input type="button" id="loginBtn" value="登陸" style="width: 80px;" onclick='check1()'> <img id="indicator" src="/${pageContext.request.contextPath}/images/loading.gif" style="display:none"/> </TD> </TR> </TABLE> </form>
2、js腳本
<script> function check1(){ //獲取賬戶,密碼,做非空校驗 var username=$("#userName").val(); var password=$("#userPw").val(); var um=$.trim(username); var up=$.trim(password); if(null==um||""==um){ alert("請輸入賬戶信息"); return; } if(null==up||""==up){ alert("請輸入密碼信息"); return; } //判斷用戶選擇的類型 if(document.ThisForm.userType.value=="0"){ //向管理員模塊進行提交 document.getElementById("fm").action="${pageContext.request.contextPath}/AdminServlet?method=adminLogin"; } if(document.ThisForm.userType.value=="1"){ //向老師模塊進行提交 document.getElementById("fm").action="${pageContext.request.contextPath}/TeacherServlet?method=teacherLogin"; } document.getElementById("fm").submit(); } //頁面加載完畢 $(function(){ //按鍵盤enter鍵觸發提交按鈕 $('#userPw').focus(function(){ document.onkeydown = function (event) { if (event && event.keyCode == 13) { $("#loginBtn").click(); } } }); }); </script>