使用JQuery實作Ctrl Enter提交表單的方法_jquery

有時候我們為了省事就操作鍵盤組合鍵去代替使用滑鼠，我們今天就使用JQuery實作Ctrl Enter提交表單。

我們發文時，在內容輸入框中輸入完內容後，可以點選「提交」按鈕來發佈內容。可是，如果你夠“懶”，你可以不用動滑鼠，只需按住鍵盤上的Ctrl Enter鍵，即可提交表單，完成內容發佈。
當然，由於輸入框是多行文字輸入框textarea，我們知道，在textarea中按Enter(回車)鍵可以換行，並不能直接提交表單(submit)，而預設情況下，瀏覽器忽略了Ctrl鍵。那我們可以透過Javascript腳本來控制使用Ctrl Enter鍵來組合完成表單提交，本文結合範例講解基於jQuery的Ctrl Enter提交表單效果。
HTML
我們在頁面body中，放置一個textarea輸入框，一個提交按鈕button，以及展示提交後的結果div#result。

<div id="result"></div> 
<textarea name="msg" id="msg" placeholder="输入内容" autofocus></textarea> 
<button type="submit">提 交</button><span>可按“Ctrl+Enter”键提交</span> 

CSS
簡單的寫幾行css，修飾textarea輸入框、button提交按鈕以及提交後顯示內容的.post樣式。

textarea {display:block; width:450px;height:100px;border: 1px solid #ccc;} 
button {border: 1px solid #ccc; background: #ececec;-webkit-border-radius: 3px; 
-moz-border-radius: 3px;margin-top: 10px;padding: 5px 20px; cursor:pointer} 
.post{width: 230px;border: 1px solid #ccc;background: #ececec; padding: 10px; margin: 10px 0;} 

jQuery
首先必須預先載入jQuery函式庫。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

我們來寫一個簡單的插件ctrlEnter()，其中帶兩個參數，第一個參數btns表示插件作用的元素，第二個參數fn表示呼叫的函數。我們在插件中加入函數performAction()來確保插件內部呼叫。接著插件開始偵聽鍵盤事件，當按下keydown鍵盤中的某個鍵時，判斷如果按下的是Enter(回車)鍵和Ctrl鍵，則呼叫performAction()，並阻止預設的回車換行行為。然後我們也應該在button上綁定click事件呼叫performAction()，這樣就可以透過點擊按鈕也可以提交內容了。

$.fn.ctrlEnter = function (btns, fn) { 
   var thiz = $(this); 
   btns = $(btns); 
     
   function performAction (e) { 
     fn.call(thiz, e); 
   }; 
   thiz.bind("keydown", function (e) { 
    if (e.keyCode === 13 && e.ctrlKey) { 
      performAction(e); 
      e.preventDefault(); //阻止默认回车换行 
    } 
   }); 
   btns.bind("click", performAction); 
} 

最後，呼叫ctrlEnter，將textarea中的內容提交到#result中，並且將回車替換為br，並且清空textarea。當然在實際應用中，應該將內容post給後台處理程序，讓後台程式php等處理內容及資料互動。

$("#msg").ctrlEnter("button", function () { 
    $("<p class='post'></p>").append(this.val().replace(/\n/g, "<br/>")).fadeIn('slow') 
.appendTo("#result"); 
    this.val(""); 
}); 

以上就是如何使用JQuery實作Ctrl Enter提交表單的方法，大家有沒有一個清晰的思路了，希望這篇文章對大家的學習有所幫助。