按鍵盤enter鍵觸發提交submit按鈕


要實現功能:在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>  

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM