javascrip 按下ctrl和enterEnter鍵實現提交表單

admin發表於2017-03-29
Java

按下ctrl鍵然後再按下enterEnter鍵提交一個資料這個在實際應用中非常的常見，比如QQ的資訊傳送功能就有這樣的選項，下面我們們就用javascript實現以下如何按下這兩個鍵實現表單提交功能，當然必須是首先按下ctrl，然後再按下enter鍵，這個時候ctrl鍵不能夠鬆開。程式碼例項如下:

[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 ctrlKeycode=null;
  var enterKeycode=null;
         
  function submitForm(formid){
    if(enterKeycode==13&&ctrlKeycode==null){
      enterKeycode=null;
    }
    else if(enterKeycode==13&&ctrlKeycode){
      document.getElementById(formid).submit();
       enterKeycode=null;
       ctrlKeycode=null;
    }
  }
  var otxt=document.getElementById("txt");
  otxt.onkeydown=function(ev){
    var ev=window.event||ev;
    ctrlKeycode=ev.ctrlKey;
    enterKeycode=ev.keyCode;
    submitForm("antzone");
  }
}
</script> 
</head> 
<body> 
<form action="http://www.softwhy.com" id="antzone">
  <textarea name="textarea" id="txt">softwhy.com</textarea>
</form>
</body> 
</html>

上面的程式碼實現了我們的要求，必須同時按下ctrl和enter鍵才會提交表單，並且必須是首先按下ctrl鍵，然後再按下enter鍵，否則無法提交表單，下面介紹一下它的實現過程。一.程式碼註釋:

1.window.onload=function(){}，文件內容完全載入完畢再去執行函式中的程式碼。

2.var ctrlKeycode=null，宣告一個變數用來儲存一個布林值用來說明ctrl鍵是否被按下。

3.var enterKeycode=null，宣告一個變數用來儲存按鍵碼。

4.function submitForm(formid)，此函式可以實現相關的判斷提交操作，引數是form表單的id屬性值。

5.if(enterKeycode==13&&ctrlKeycode==null){

  enterKeycode=null;

}，如果Enter鍵按下，但是ctrl鍵沒有按下，就將enterKeycode重置為null，這裡可以避免先按下enter鍵再去按下ctrl的順序問題，重置為null，可以防止只按下ctrl鍵就發生提交表單的問題。

6.else if(enterKeycode==13&&ctrlKeycode){

  document.getElementById(formid).submit();

  enterKeycode=null;

  ctrlKeycode=null;

}，當同時按下ctrl鍵和enter鍵的時候，就會提交表單，並且重置響應的變數。7.var otxt=document.getElementById("txt")，獲取元素物件。

8.otxt.onkeydown=function(ev){

  var ev=window.event||ev;

  ctrlKeycode=ev.ctrlKey;

  enterKeycode=ev.keyCode;

  submitForm("antzone");

}，註冊事件處理函式，並且進行相關的賦值和相容性處理。

二.相關閱讀:

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

2.var ev=window.event||ev可以參閱var ev=window.event||ev的作用是什麼一章節。

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

4.keyCode可以參閱js的鍵盤按鍵keyCode屬性值對應表一章節。

相關文章