有時候我們為了省事就操作鍵盤組合鍵去代替使用鼠標，我們今天就使用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提交表單的方法，大家有沒有一個清晰的思路了，希望這篇文章對大家的學習有所幫助。
新聞熱點
疑難解答
