點選回車實現表單提交效果程式碼例項

螞蟻小編發表於2017-03-27

本章節介紹一下如何實現點選回車就可以實現表單的提交效果。

下面是一段實現此功能的程式碼例項和大家分享一下，希望能夠給需要的朋友帶來幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script language="javascript">
function check(){
  var formname=document.loginForm;
  if(formname.userName.value==""){
    alert("請輸入使用者名稱！");
    formname.userName.focus();
    return false;
  }
  if(formname.pwd.value==""){
    alert("請輸入密碼！");
    formname.pwd.focus();
    return false;
  }
  formname.submit();
}
 
window.onload=function(){
  var obt=document.getElementById("bt");
  document.body.onkeydown=function(ev){
    var ev=ev||window.event;
    if(ev.keyCode == 13){
      obt.click();
    }
  }
  obt.onclick=function(){
    check();
  }
}
</script>
</head>
<body>
<form name ="loginForm" method="post" action="fuck.html">        
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="69%" height="30">
     <span class="font_04">帳戶名</span>
     <input type="text" name="userName" size="18.5">
    </td>
  </tr>
  <tr>
    <td width="69%" height="30">
      <span class="font_04">密　碼</span>
      <input type="password" name="pwd" >
    </td>
  </tr>
  <tr>
    <td width="31%" height="30">
      <input type="button" id="bt" value="提交表單"/>
    </td>
  </tr>
</table>
</form>
</body>
</html>

上面的程式碼實現了我們的要求，點選回車或者按鈕都可以實現表單提交的功能，下面介紹一下它的實現原理。

實現原理:

點選按鈕可以實現表單提交效果，這個自然是很簡單了，不用多介紹了。我們可以將onkeydown事件處理函式註冊在body上，然後當點選鍵盤按鍵的時候，判斷是否是點選的回車，Enter鍵的按鍵碼是13，如果點選的是Enter鍵，那麼就呼叫按鈕的click()函式，也就相當於點選按鈕了，於是就進行表單提交工作。

相關文章