使用JQuery實現(xiàn)Ctrl+Enter提交表單的方法
有時候我們?yōu)榱耸∈戮筒僮麈I盤組合鍵去代替使用鼠標，我們今天就使用JQuery實現(xiàn)Ctrl+Enter提交表單。
我們發(fā)帖時，在內容輸入框中輸入完內容后，可以點擊“提交”按鈕來發(fā)表內容?？墒?，如果你夠“懶”，你可以不用動鼠標，只需按住鍵盤上的Ctrl+Enter鍵，即可提交表單，完成內容發(fā)布。
當然，由于輸入框是一個多行文本輸入框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()，其中帶兩個參數(shù)，第一個參數(shù)btns表示插件作用的元素，第二個參數(shù)fn表示調用的函數(shù)。我們在插件中加入函數(shù)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等處理內容及數(shù)據(jù)交互。
$("#msg").ctrlEnter("button", function () {
$("<p class='post'></p>").append(this.val().replace(/\n/g, "<br/>")).fadeIn('slow')
.appendTo("#result");
this.val("");
});
以上就是如何使用JQuery實現(xiàn)Ctrl+Enter提交表單的方法，大家有沒有一個清晰的思路了，希望這篇文章對大家的學習有所幫助。
- jQuery使用$.ajax提交表單完整實例
- jQuery基于ajax()使用serialize()提交form數(shù)據(jù)的方法
- jQuery實現(xiàn)form表單基于ajax無刷新提交方法詳解
- jquery驗證郵箱格式并顯示提交按鈕
- jQuery Real Person驗證碼插件防止表單自動提交
- jQuery實現(xiàn)ctrl+enter（回車）提交表單
- Jquery中ajax提交表單幾種方法(get、post兩種方法)
- jquery validate和jquery form 插件組合實現(xiàn)驗證表單后AJAX提交
- jquery ajax 如何向jsp提交表單數(shù)據(jù)
- jQuery同步提交示例代碼
相關文章
本文主要分享了基于jQuery實現(xiàn)數(shù)字滾動效果的示例代碼，附源碼下載。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
可能有一些站長會注意到這樣的效果，到收到的新消息會閃爍標題提示，那么新消息在網(wǎng)頁標題閃爍顯示的效果如何實現(xiàn)，下面有個不錯的示例，感興趣的朋友可以參考下2013-11-11
這篇文章主要介紹了jQuery中height()方法用法,以實例形式較為詳細分析了height()方法返回元素高度的用法與相關注意事項,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
js/jquery去掉空格,回車,換行示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了jQuery實現(xiàn)的瀑布流加載效果,結合實例形式分析了jQuery基于數(shù)學運算與事件響應實現(xiàn)頁面瀑布流加載的功能,需要的朋友可以參考下2016-09-09
這是一款基于jQuery的滑動桿購買日期選擇插件，它的外觀仿的是阿里云的服務器購買日期選擇界面。這款jQuery插件非常適合在一些虛擬產品購買頁面上使用，它可以幫助你的用戶快速選擇產品的購買日期，感興趣的朋友跟著小編學習吧2015-09-09
jQuery中通過ajax的get()函數(shù)讀取頁面的方法
這篇文章主要介紹了jQuery中通過ajax的get()函數(shù)讀取頁面的方法,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了jQuery表單域選擇器用法,實例分析了常見的表單元素選擇器的使用技巧,并給出了一個完整的實例總結,需要的朋友可以參考下2015-02-02
完美解決jQuery 鼠標快速滑過后,會執(zhí)行多次滑出的問題
下面小編就為大家?guī)硪黄昝澜鉀QjQuery 鼠標快速滑過后,會執(zhí)行多次滑出的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
jquery插件jquery.dragscale.js實現(xiàn)拖拽改變元素大小的方法(附demo源碼下載)
這篇文章主要介紹了jquery插件jquery.dragscale.js實現(xiàn)拖拽改變元素大小的方法,涉及jquery針對鼠標事件的響應及頁面元素動態(tài)操作的相關技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-02-02