DIV CSS 佈局教程網

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