使用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(""); 
});       

好了，你現在可以到​​demo​​中測試下效果了。

有同學說可以通過在表單form上直接綁定onkeydown來偵聽滑鼠事件，隻需要一句代碼如下：

<form onkeydown="if(event.ctrlKey&&event.keyCode==13)this.submit()">        

執行以上代碼後，可以通過按住Ctrl+Enter鍵實作送出表單，但貌似這種上述代碼浏覽器相容性差，你還需要寫一大段代碼來解決浏覽器的相容性，是以直接使用jQuery版的吧。