這篇文章主要介紹了使用JQuery實現Ctrl+Enter提交表單的方法，需要的朋友可以參考下

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

我們發帖時，在內容輸入框中輸入完內容后，可以點擊“提交”按鈕來發表內容。可是，如果你夠“懶”，你可以不用動鼠標，只需按住鍵盤上的Ctrl+Enter鍵，即可提交表單，完成內容發布。

當然，由于輸入框是一個多行文本輸入框textarea，我們知道，在textarea中按Enter(回車)鍵可以換行，并不能直接提交表單(submit)，而默認情況下，瀏覽器忽略了Ctrl鍵。那么我們可以通過Javascript腳本來控制使用Ctrl+Enter鍵來組合完成表單提交，本文結合示例講解基于jQuery的Ctrl+Enter提交表單效果。

HTML

我們在頁面body中，放置一個textarea輸入框，一個提交按鈕button，以及展示提交后的結果div#result。

1. <div id="result"></div>  
2. <textarea name="msg" id="msg" placeholder="輸入內容" autofocus></textarea>  
3. <button type="submit">提 交</button><span>可按“Ctrl+Enter”鍵提交</span>  

CSS

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

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

jQuery

首先必須預先載入jQuery庫。

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

一個參數btns

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

1. $.fn.ctrlEnter = function (btns, fn) {  
2. var thiz = $(this);  
3. btns = $(btns);  
4.  
5. function performAction (e) {  
6. fn.call(thiz, e);  
7. };  
8. thiz.bind("keydown", function (e) {  
9. if (e.keyCode === 13 && e.ctrlKey) {  
10. performAction(e);  
11. e.preventDefault(); //阻止默認回車換行  
12. }  
13. });  
14. btns.bind("click", performAction);  
15. }  

最后，調用ctrlEnter，將textarea中的內容提交到#result中，并且將回車替換為br，并且清空textarea。當然實際應用中，應該將內容post給后臺處理程序，讓后臺程序php等處理內容及數據交互。

 

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

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