點選enter和ctrl實現表單提交效果

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

大家一定都用過QQ聊天軟體，當傳送資訊的時候，可以選擇點選回車或者點選enter+ctrol，本人更加傾向於後者，因為可以有效的防止誤操作，因為回車也有換行的功能，也防止了兩者的衝突，下面介紹一下如何使用enter和ctrol組合鍵實現提交表單效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<script type="text/javascript">
window.onload=function(){
  var oform=document.getElementById("theform");
  oform.onkeydown=function(ev){
    var ev=window.event||ev;
    if(ev.keyCode==13&&ev.ctrlKey){
      oform.submit();
    }
  }
}
</script>
</head>  
<body>  
<form id="theform" action="softwhy.com">
<input type="text">
</form>
</body>  
</html>

在以上程式碼中，同時按下回車和ctrol鍵可以提交表單，下面介紹一下它的實現過程。

一.實現原理:

當表單獲取焦點並按下按鍵的時候，就會觸發onkeydown事件處理函式，這個時候就會判斷Enter鍵和ctrol鍵是否一起按下，ev.keyCode==13表示Enter鍵已經按下，ev.ctrlKey表示ctrol鍵已經按下，上述條件滿足就會提交表單，oform.submit()實現。

二.程式碼註釋:

1.onkeydown事件可以參閱javascript keydown 事件一章節。 

2.keyCode屬性可以參閱javascript keyCode一章節。

3.ctrlKey屬性可以參閱javascript ctrlKey一章節。

相關文章