JS 事件（8）—鍵盤事件

鍵盤事件

 

對鍵盤事件的支持主要遵循的是DOM0級。

“DOM3級事件”為鍵盤事件制定了規范，IE9率先實現。

 

keydown事件

按下鍵盤上的任意鍵觸發；按住不放，重復觸發。

 

keypress事件

按下鍵盤上的字符鍵觸發；按住不放，重復觸發。

按下Esc鍵也會觸發這個事件。

 

keyup事件

釋放鍵盤上的鍵時觸發。

 

觸發順序

（1）當按下鍵盤上的一個字符鍵時，首先觸發keydown事件，然后緊跟着keypress事件，最后會觸發keyup事件。其中，keydown和keypress事件是在文本框發生變化之前觸發；而keyup事件則是在文本框發生變化之后觸發的。

（2）當按下鍵盤上的一個非字符鍵，那么首先觸發keydown事件， 然后是keyup事件。

 

鍵盤事件的修改鍵

鍵盤事件與鼠標事件一樣，都支持相應的修改鍵；而且，鍵盤事件的對象中也包含shiftKey、ctrlKey、altKey和metaKey屬性；IE不支持metaKey。

document.onkeyup = function(event) {
    event = event || window.event;
    var array = [];
    if(event.altKey) {
        array.push("alt");
    };
    if(event.ctrlKey) {
        array.push("ctrl");
    };
    if(event.shiftKey) {
        array.push("shift");
    };
    if(event.metaKey) {
        array.push("meta");
    };
    if(event.keyCode === 13) {
        alert("按下回車鍵的同時也按下了：" + array.join("，"));
    };
};

 

還是老問題，metaKey屬性檢測不出來。

 

鍵碼

在發生keydown和keyup事件時，event對象中的keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。

對於數字、字母字符鍵，keyCode值與ASCII中對應的小寫字母與數字的編碼相同；也就是說，大小寫字母的keyCode值沒有區別。

document.onkeyup = function(event) {
    event = event || window.event;
    alert(event.keyCode);
};

 

字符編碼

在所有瀏覽器中，按下能夠插入或者刪除字符的鍵都會觸發keypress事件。

IE9、Firefox、Safari、Chrome的event對象都支持一個charCode屬性，這個屬性只有在發生keypress事件時包含值，而且這個值是按下的那個鍵所代碼的字符的AECII編碼，大小寫字母的charCode值不同。

document.onkeypress = function(event) {
    event = event || window.event;
    alert("charCode：" + event.charCode);
};