我們發表微博或論壇發帖時(shí)，在內(nèi)容輸入框中輸入完內(nèi)容後，可(kě)以點擊“提交”按鈕來(lái)發表內(nèi)容。可(kě)是，如果你(nǐ)夠“懶”，你(nǐ)可(kě)以不用動鼠标，隻需按住鍵盤上(shàng)的Ctrl+Enter鍵，即可(kě)提交表單，完成內(nèi)容發布。

當然，由于輸入框是一個(gè)多(duō)行(xíng)文本輸入框textarea，我們知道(dào)，在textarea中按Enter(回車(chē))鍵可(kě)以換行(xíng)，并不能直接提交表單(submit)，而默認情況下，浏覽器(qì)忽略了Ctrl鍵。那(nà)麽我們可(kě)以通(tōng)過Javascript腳本來(lái)控制(zhì)使用Ctrl+Enter鍵來(lái)組合完成表單提交，本文結合示例講解基于jQuery的Ctrl+Enter提交表單效果。

HTML

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

	

提 交可(kě)按“Ctrl+Enter”鍵提交 

CSS

簡單的寫幾行(xíng)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

首先必須預先載入jQuery庫。

我們來(lái)編寫一個(gè)簡單的插件ctrlEnter()，其中帶兩個(gè)參數(shù)，第一個(gè)參數(shù)btns表示插件作(zuò)用的元素，第二個(gè)參數(shù)fn表示調用的函數(shù)。我們在插件中加入函數(shù)performAction()來(lái)确保插件內(nèi)部調用。接着插件開(kāi)始偵聽(tīng)鍵盤事件，當按下keydown鍵盤中的某個(gè)鍵時(shí)，判斷如果按下的是Enter(回車(chē))鍵和(hé)Ctrl鍵，則調用performAction()，并阻止默認的回車(chē)換行(xíng)行(xíng)為(wèi)。然後我們還(hái)應該在button上(shàng)綁定click事件調用performAction()，這樣就可(kě)以通(tōng)過單擊按鈕也可(kě)以提交內(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(); //阻止默認回車(chē)換行(xíng)
        }
     });
     btns.bind("click", performAction);
}

最後，調用ctrlEnter，将textarea中的內(nèi)容提交到#result中，并且将回車(chē)替換為(wèi)br，并且清空(kōng)textarea。當然實際應用中，應該将內(nèi)容post給後台處理(lǐ)程序，讓後台程序(php等)處理(lǐ)內(nèi)容及數(shù)據交互。

$("#msg").ctrlEnter("button", function () {
       $("").append(this.val().replace(/\n/g, "
")).fadeIn('slow')
.appendTo("#result");
       this.val("");
});

好了，你(nǐ)現在可(kě)以到demo中測試下效果了。

有(yǒu)同學說可(kě)以通(tōng)過在表單form上(shàng)直接綁定onkeydown來(lái)偵聽(tīng)鼠标事件，隻需要一句代碼如下：

執行(xíng)以上(shàng)代碼後，可(kě)以通(tōng)過按住Ctrl+Enter鍵實現提交表單，但(dàn)貌似這種上(shàng)述代碼浏覽器(qì)兼容性差，你(nǐ)還(hái)需要寫一大(dà)段代碼來(lái)解決浏覽器(qì)的兼容性，所以直接使用jQuery版的吧(ba)。