jQuery鍵盤事件 ctrl+Enter斷行符號鍵提交表單

標籤：style   blog   class   code   java   tar   

分享下jquery鍵盤事件的一些例子，個人感覺還不錯，有空時多多研究。

鍵盤事件處理所有使用者在鍵盤敲擊的情況，不管在文本輸入地區內部還是外部。鍵盤事件在不同的瀏覽器中作用的範圍是不一樣的，通常這種鍵盤事件可以作用於 Form元素，a標籤元素，window ，document這樣的元素上。在所有可以獲得交點的元素上是可以觸發鍵盤事件的，可以獲得焦點的元素可以這樣理解，在使用Tab鍵的時候可以跳躍到的元素就是可以使用鍵盤事件的元(在沒有為這些元素設定tabindex屬性值的情況下，當tabindex設定為負數的時候，在使用Tab鍵的時候就不會獲得焦點)。

鍵盤事件可以傳遞一個參數event，其實所有的jQuery事件都可以傳遞這麼一個參數，這個event是一個對象，其包括一些屬性，在觸發事件的時候可以通過event來獲得一些關於事件的值，比如在使用鍵盤的時候可以使用event.keyCode來獲得所按下鍵的ASCII碼的值。見下文
1：keydown()事件是鍵盤點擊時觸發的第一個鍵盤事件，如果使用者繼續按住鍵位，keydown事件會持續進行。

$(‘input‘).keydown(function(event){alert(event.keyCode);});

通過鍵盤返回的值可以實現更多的關於這些元素的控制，比如說上下左右鍵，分別是：38,40,37,39 。

2：keypress()事件和keydown是差不多的，只有一個例外，如果需要阻止按鍵的預設行為，你必須是喲就keypress事件。
3：keyup()事件是最後一個發生的事件(在keydown事件之後)，不想keydown事件，該事件在鬆開鍵盤是僅觸發一次(因為鬆開鍵盤並不是一個持續的狀態)。

$(‘input‘).keyup(funciton(){alert(‘keyup function is running!!‘);});

4：在jQuery中keydown，keypress，keyup事件是按一定的順序執行的。

$(‘input‘).keyup(function(){console.log(‘keyup‘);});$(‘input‘).keydown(function(){console.log(‘keydown‘);});$(‘input‘).keypress(function(){console.log(‘keypress‘);});

執行結果是：keydown ,keypress ,keyup .

在這裡不使用alert是因為在alert的時候會阻止一些事件的發生，在這裡是會阻止keyup事件的發生，要想實驗這端代碼，可以在Firefox下進行，需要在瀏覽器上裝上firebug這個外掛程式。放心安裝，因為Firefox是一款開源的瀏覽器。相信開源軟體。
jQuery處理鍵盤事件有三個函數,根據事件發生的順序分別是:
keydown();
keyup();
keypress();
keydown()
keydown事件會在鍵盤按下時觸發,可以在綁定的函數中歐能夠返回false來防止觸發瀏覽器的預設事件.
keyup()
keyup事件會在按鍵釋放時觸發,也就是你按下鍵盤起來後的事件
keypress()
keypress事件會在敲擊按鍵時觸發,我們可以理解為按下並抬起同一個按鍵
我們怎麼才能擷取我按下的是A還是Z還是斷行符號按鈕呢?
鍵盤事件可以傳遞一個參數event,其實說有的jQuery事件函數中都可以傳遞這麼一個參數

$(‘input‘).keydown(function(event){alert(event.keyCode);});

上面代碼中的,event.keyCode就可以協助我們擷取到我們按下了什麼按鍵,他返回的是ascII碼,比如說上下左右鍵,分別是38,40,37,39

如果要實現ctrl+Enter就是ctrl+斷行符號提交表單

$(document).keypress(function(e) {if (e.ctrlKey && e.which == 13)$("form").submit();})

其它參考資訊：

預備知識
1.數字0索引值48..數字9索引值57
2.a索引值97..z索引值122;A索引值65..Z索引值90
3.+索引值43;-索引值45;.索引值46;退格8;tab索引值9;
4.event在ie中是全域的，在firefox是臨時對象，需要傳遞參數

*/ jQuery.extend({ /*=========================================================================== 功能描述：取得按鍵的值 調用方法： jQuery.getKeyNum(event); */ getKeyNum:function(e){ var keynum; if(window.event){ // IE keynum = event.keyCode; } else if(e.which){ // Netscape/Firefox/Opera keynum = e.which; } return keynum; }, /*=========================================================================== 功能描述：判斷是否是整數，限制編輯框只能輸入數字 調用方法： <input type="text" onkeypress="return jQuery.isInt(event);" /> 待解決問題： firefox下tab鍵不起作用。 */ isInt:function(e){ var keynum = this.getKeyNum(e); if(keynum >= 48 && keynum <= 57 || keynum == 8){//firefox下退格需判斷8 return true; } www.jbxue.comreturn false; }, /*=========================================================================== 功能描述：判斷是否是小數，限制編輯框只能輸入數字，只能輸入一個小數點。 調用方法： <input type="text" onkeypress="return jQuery.isFloat(this,event);" /> */ isFloat:function(txt,e){ var keynum = this.getKeyNum(e); if(keynum == 46){//輸入小數點 if(txt.value.length == 0){ return false; }else if(txt.value.indexOf(‘.‘) >= 0){ return false; }else{ return true; } }  www.jbxue.comif(this.isInt(e)){ return true; } return false; } });