DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery事件之鍵盤事件(ctrl+Enter回車鍵提交表單等)
jQuery事件之鍵盤事件(ctrl+Enter回車鍵提交表單等)
編輯: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;
}
return 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;
}
}
if(this.isInt(e)){
return true;
}
return false;
}
});

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved