1. 程式人生 > >js捕獲頁面回車事件

js捕獲頁面回車事件

有時候我們需要捕獲頁面上的回車事件,以達到一些特殊效果,例如在登入頁面使用者輸入完登入名和密碼後習慣直接敲回車,這時需要捕獲回車事件,在回車事件中啟用form元素的submit動作

1.純JavaScript版

首先要捕獲 document物件的按鈕彈起事件(捕獲按下事件也可以),瀏覽器會將使用者按下的按鍵資訊物件傳遞到事件回撥函式中(以引數的形式),傳入函式中的這個按鍵資訊中包含了一個用來識別按鍵的編號(每個按鍵都有一個對應的編號),而回車按鍵對應的編號就是13,所以我們取出按鍵資訊物件中的這個編號,判斷它是不是13就可以了,初始版本如下:

document.onkeyup = function (e) {//按鍵資訊物件以函式引數的形式傳遞進來了,就是那個e
    var code = e.charCode || e.keyCode;  //取出按鍵資訊中的按鍵程式碼(大部分瀏覽器通過keyCode屬性獲取按鍵程式碼,但少部分瀏覽器使用的卻是charCode)
    if (code == 13) {
        //此處編寫使用者敲回車後的程式碼
    }
}

可這樣有個問題,在舊版IE下,按鍵資訊物件並不是直接傳遞到函式中的,所有的事件物件是儲存在window.event中的,所以為了相容舊版IE,我們可以先判斷一下window.event這個物件存在不存在,若存在,說明是舊版IE瀏覽器,如果不存在,說明是chrome、火狐之類的新式瀏覽器,改良版如下:
document.onkeyup = function (e) {
    if (window.event)//如果window.event物件存在,就以此事件物件為準
        e = window.event;
    var code = e.charCode || e.keyCode;
    if (code == 13) {
        //此處編寫使用者敲回車後的程式碼
    }
}


2.Jquery版
思路和純JavaScript程式碼類似,不過Jquery實現起來可能更簡單一些,因為Jquery本身就已經在某些方面做了瀏覽器相容性設定,所以程式碼會比較簡潔一些

$(document).keyup(function (e) {//捕獲文件物件的按鍵彈起事件
    if (e.keyCode == 13) {//按鍵資訊物件以引數的形式傳遞進來了
        //此處編寫使用者敲回車後的程式碼
    }
});