有時(shí)候我們?yōu)榱耸∈戮筒僮麈I盤組合鍵去代替使用鼠標(biāo)，我們今天就使用JQuery實(shí)現(xiàn)Ctrl+Enter提交表單。

我們發(fā)帖時(shí)，在內(nèi)容輸入框中輸入完內(nèi)容后，可以點(diǎn)擊“提交”按鈕來(lái)發(fā)表內(nèi)容。可是，如果你夠“懶”，你可以不用動(dòng)鼠標(biāo)，只需按住鍵盤上的Ctrl+Enter鍵，即可提交表單，完成內(nèi)容發(fā)布。
當(dāng)然，由于輸入框是一個(gè)多行文本輸入框textarea，我們知道，在textarea中按Enter(回車)鍵可以換行，并不能直接提交表單(submit)，而默認(rèn)情況下，瀏覽器忽略了Ctrl鍵。那么我們可以通過(guò)Javascript腳本來(lái)控制使用Ctrl+Enter鍵來(lái)組合完成表單提交，本文結(jié)合示例講解基于jQuery的Ctrl+Enter提交表單效果。
HTML
我們?cè)陧?yè)面body中，放置一個(gè)textarea輸入框，一個(gè)提交按鈕button，以及展示提交后的結(jié)果div#result。

<div id="result"></div> 
<textarea name="msg" id="msg" placeholder="輸入內(nèi)容" autofocus></textarea> 
<button type="submit">提 交</button><span>可按“Ctrl+Enter”鍵提交</span> 

CSS
簡(jiǎn)單的寫(xiě)幾行css，修飾textarea輸入框、button提交按鈕以及提交后顯示內(nèi)容的.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
首先必須預(yù)先載入jQuery庫(kù)。

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

我們來(lái)編寫(xiě)一個(gè)簡(jiǎn)單的插件ctrlEnter()，其中帶兩個(gè)參數(shù)，第一個(gè)參數(shù)btns表示插件作用的元素，第二個(gè)參數(shù)fn表示調(diào)用的函數(shù)。我們?cè)诓寮屑尤牒瘮?shù)performAction()來(lái)確保插件內(nèi)部調(diào)用。接著插件開(kāi)始偵聽(tīng)鍵盤事件，當(dāng)按下keydown鍵盤中的某個(gè)鍵時(shí)，判斷如果按下的是Enter(回車)鍵和Ctrl鍵，則調(diào)用performAction()，并阻止默認(rèn)的回車換行行為。然后我們還應(yīng)該在button上綁定click事件調(diào)用performAction()，這樣就可以通過(guò)單擊按鈕也可以提交內(nèi)容了。

$.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(); //阻止默認(rèn)回車換行 
    } 
   }); 
   btns.bind("click", performAction); 
} 

最后，調(diào)用ctrlEnter，將textarea中的內(nèi)容提交到#result中，并且將回車替換為br，并且清空textarea。當(dāng)然實(shí)際應(yīng)用中，應(yīng)該將內(nèi)容post給后臺(tái)處理程序，讓后臺(tái)程序php等處理內(nèi)容及數(shù)據(jù)交互。

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

以上就是如何使用JQuery實(shí)現(xiàn)Ctrl+Enter提交表單的方法，大家有沒(méi)有一個(gè)清晰的思路了，希望這篇文章對(duì)大家的學(xué)習(xí)有所幫助。

最新評(píng)論