快捷導(dǎo)航

jQuery事件之鍵盤事件(ctrl+Enter回車鍵提交表單等)

更新時(shí)間：2014年05月11日 12:19:21 作者：

鍵盤事件處理所有用戶在鍵盤敲擊的情況，不管在文本輸入?yún)^(qū)域內(nèi)部還是外部，這里介紹下jquery鍵盤事件的相關(guān)知識(shí)，需要的朋友可以參考下

鍵盤事件處理所有用戶在鍵盤敲擊的情況，不管在文本輸入?yún)^(qū)域內(nèi)部還是外部。鍵盤事件在不同的瀏覽器中作用的范圍是不一樣的，通常這種鍵盤事件可以作用于 Form元素，a標(biāo)簽元素，window ，document這樣的元素上。在所有可以獲得交點(diǎn)的元素上是可以觸發(fā)鍵盤事件的，可以獲得焦點(diǎn)的元素可以這樣理解，在使用Tab鍵的時(shí)候可以跳躍到的元素就是可以使用鍵盤事件的元(在沒有為這些元素設(shè)置tabindex屬性值的情況下，當(dāng)tabindex設(shè)置為負(fù)數(shù)的時(shí)候，在使用Tab鍵的時(shí)候就不會(huì)獲得焦點(diǎn))。

鍵盤事件可以傳遞一個(gè)參數(shù)event，其實(shí)所有的jQuery事件都可以傳遞這么一個(gè)參數(shù)，這個(gè)event是一個(gè)對(duì)象，其包括一些屬性，在觸發(fā)事件的時(shí)候可以通過event來獲得一些關(guān)于事件的值，比如在使用鍵盤的時(shí)候可以使用event.keyCode來獲得所按下鍵的ASCII碼的值。見下文

1：keydown()事件是鍵盤點(diǎn)擊時(shí)觸發(fā)的第一個(gè)鍵盤事件，如果用戶繼續(xù)按住鍵位，keydown事件會(huì)持續(xù)進(jìn)行。

復(fù)制代碼代碼如下:

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

通過鍵盤返回的值可以實(shí)現(xiàn)更多的關(guān)于這些元素的控制，比如說上下左右鍵，分別是：38,40,37,39 。
2：keypress()事件和keydown是差不多的，只有一個(gè)例外，如果需要阻止按鍵的默認(rèn)行為，你必須是喲就keypress事件。

3：keyup()事件是最后一個(gè)發(fā)生的事件(在keydown事件之后)，不想keydown事件，該事件在松開鍵盤是僅觸發(fā)一次(因?yàn)樗砷_鍵盤并不是一個(gè)持續(xù)的狀態(tài))。

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

執(zhí)行結(jié)果是：keydown ,keypress ,keyup .
在這里不使用alert是因?yàn)樵赼lert的時(shí)候會(huì)阻止一些事件的發(fā)生，在這里是會(huì)阻止keyup事件的發(fā)生，要想實(shí)驗(yàn)這端代碼，可以在Firefox下進(jìn)行，需要在瀏覽器上裝上firebug這個(gè)插件。放心安裝，因?yàn)镕irefox是一款開源的瀏覽器。相信開源軟件。

jQuery處理鍵盤事件有三個(gè)函數(shù),根據(jù)事件發(fā)生的順序分別是:

復(fù)制代碼代碼如下:

keydown();
keyup();
keypress();

keydown()

keydown事件會(huì)在鍵盤按下時(shí)觸發(fā),可以在綁定的函數(shù)中歐能夠返回false來防止觸發(fā)瀏覽器的默認(rèn)事件.

keyup()

keyup事件會(huì)在按鍵釋放時(shí)觸發(fā),也就是你按下鍵盤起來后的事件

keypress()

keypress事件會(huì)在敲擊按鍵時(shí)觸發(fā),我們可以理解為按下并抬起同一個(gè)按鍵

我們?cè)趺床拍塬@取我按下的是A還是Z還是回車按鈕呢?

鍵盤事件可以傳遞一個(gè)參數(shù)event,其實(shí)說有的jQuery事件函數(shù)中都可以傳遞這么一個(gè)參數(shù)

復(fù)制代碼代碼如下:

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

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

如果我們要實(shí)現(xiàn)ctrl+Enter就是ctrl+回車提交表單

復(fù)制代碼代碼如下:

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

其它參考信息：

預(yù)備知識(shí)

1.數(shù)字0鍵值48..數(shù)字9鍵值57
2.a鍵值97..z鍵值122;A鍵值65..Z鍵值90
3.+鍵值43;-鍵值45;.鍵值46;退格8;tab鍵值9;
4.event在ie中是全局的，在firefox是臨時(shí)對(duì)象，需要傳遞參數(shù)

復(fù)制代碼代碼如下:

*/ 
jQuery.extend({ 
/*=========================================================================== 
功能描述：取得按鍵的值 
調(diào)用方法： 
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; 
}, 
/*=========================================================================== 
功能描述：判斷是否是整數(shù)，限制編輯框只能輸入數(shù)字 
調(diào)用方法： 
<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; 
} 
return false; 
}, 
/*=========================================================================== 
功能描述：判斷是否是小數(shù)，限制編輯框只能輸入數(shù)字，只能輸入一個(gè)小數(shù)點(diǎn)。 
調(diào)用方法： 
<input type="text" onkeypress="return jQuery.isFloat(this,event);" /> 
*/ 
isFloat:function(txt,e){ 
var keynum = this.getKeyNum(e); 
if(keynum == 46){//輸入小數(shù)點(diǎn) 
if(txt.value.length == 0){ 
return false; 
}else if(txt.value.indexOf('.') >= 0){ 
return false; 
}else{ 
return true; 
} 
} 
if(this.isInt(e)){ 
return true; 
} 
return false; 
} 
});