JavaScript 點選回車驗證提交表單

admin發表於2018-11-01
JavaScript

Enter鍵是應用最為頻繁的按鍵之一，對其恰當的應用可以節省很多操作。

比如在使用QQ聊天的時候，點選回車就可以傳送資訊，而不是使用滑鼠點選。

與上面情形類似，表單提交驗證的時候，也可以利用Enter鍵來提升一下使用者體驗。

表單填寫完畢之後，無需挪動滑鼠點選提交按鈕，只要點選回車即可實現表單驗證與提交功能。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<script> 
window.onload=function(){
  let txt=document.getElementById("txt");
  let st=document.getElementById("st");
  let form=document.forms[0];
  form.onsubmit=function(){
    if(txt.value==""){
      alert("請先寫一些內容");
      txt.focus();
      return false;
    }
  }
  document.onkeydown = function(e){
    if(ev.keyCode==13&&document.activeElement === form) {
      form.submit();
    }
  }
}
</script> 
</head> 
<body> 
<form action="#" id="fm">
  <input type="text" id="txt" name="txt">
  <input type="submit" id="st" name="st">
</form>
</body> 
</html>

上述程式碼可以實現文字框提交內容是否為空的簡單驗證。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/01/014043rfvesevpvzpy0y1h.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

點選提交按鈕和回車都會實現驗證功能，下面詳細分析一下實現過程。

（1）.首先為form表單註冊submit事件處理函式，此事件處理函式能夠實現文字是否為空的驗證。

（2）.點選提交按鈕可以觸發驗證事件，這個很簡單，不多介紹，下面著重介紹如何實現點選回車驗證表單。

（3）.為document註冊keydown事件，在頁面中點選任何按鍵都可以觸發此事件，下面的任務是篩選點選回車按鍵。

（4）.如果ev.keyCode等於13，那麼說明當前按鍵就是Enter鍵。

（5）.但是最好不要再頁面任何情況下點選Enter鍵都會觸發submit事件，可能其他功能也有對回車的響應功能。

（6）.所以最好當焦點依然處於form中時，能夠響應回車.

（7）.document.activeElement === form可以實現焦點是否在表單中的判斷。

上面已經將功能具體實現過程進行了一下介紹，更多內容可以參閱下面文章。

相關閱讀：

（1）.keyCode參閱JavaScript keyCode一章節。

（2）.document.activeElement參閱document.activeElement一章節。

（3）.return false參閱JavaScript return false一章節。

相關文章